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内 容 简 介 


本 书 浅显 易 懂 ， 实 例 丰 富 ， 详 细 介绍 了 HIML5+CSS3+JavaScript 开发 需要 掌握 的 各 类 实战 知识 。 

全 书 分 为 两 册 : 核心 技术 分 册 和 强化 训练 分 册 。 核 心 技术 分 册 共 17 章 ， 包 括 HTML 基础 、 文 本 、 图 像 和 超 链接 、 
CSS3 概述 、CSS3 高 级 应 用 、 表 格 与 <div> 标 签 、 列 表 、 表 单 、 多 媒体 、HTMLS5 新 特性 、JavaScript 基础 、 绘 制图 形 、 
文件 与 拖 放 、JavaScript 对 象 编程 、 响 应 式 网 页 设计 、 响 应 式 组 件 、 课 程 设计 一 游戏 公园 等 内 容 。 通 过 学 习 ， 读 者 可 快 
速 开 发 出 一 些 中 小 型 应 用 程序 。 强 化 训练 分 册 共 18 章 ， 通 过 大 量 源 于 实际 生活 的 趣味 案例 ， 强 化 上 机 实践 ， 拓 展 和 提 
升 软件 开发 中 对 实际 问题 的 分 析 与 解决 能 力 。 

本 书 除 纸 质 内 容 外 ， 配 书 资源 包 中 还 给 出 了 海量 开发 资源 库 ， 主 要 内 容 如 下 。 


视频 讲解 : 总 时 长 17 小 时 ， 共 162 集 技术 资源 库 : 800 页 技术 参考 文档 
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面试 资源 库 ，369 个 企业 面试 真题 
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本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电 话 : 010-62782989 13701121933 
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浏览 网 页 已 经 成 为 人 们 生活 和 工作 中 不 可 或 缺 的 一 部 分 , 网 页 页 面 也 随 着 技术 的 发 展 越 来 越 丰富 ， 
越 来 越美 观 ， 制 作 精 美的 网 页 也 变 成 了 一 种 流行 。 而 HTML 语言 是 网 页 设计 的 一 种 基础 语言 ， 自 从 
HTML5、CSS3 和 JavaScript 的 出 现 ,使 网 页 设计 从 外 观 上 更 炫 、 技 术 上 更 简单 。 因此 , HTML5、CSS3 
和 JavaScript 设计 语言 受到 很 多 程序 员 的 青睐 ， 成 为 网 页 开发 人 员 使 用 的 主流 编程 语言 之 一 。 


本 书 内 容 


本 书 分 为 两 册 : 核心 技术 分 册 和 强化 训练 分 册 。 
核心 技术 分 册 共 17 章 ， 提 供 了 从 入 门 到 编程 高 手 所 必需 的 各 类 HIML5、CSS3 和 JavaScript 核心 
知识 ， 大 体 结构 如 下 图 所 示 。 


第 1 篇: 基础 篇 


快速 浏览 本 章 内 容 
[Le | 


入 门 


第 2 篇: 提高 篇 
快速 浏览 本 章 内 容 、 项 目 开发 全 
第 3 篇 : 项 目 篇 过 程 、 图 示 和 视频 等 


第 1 篇 : 基础 篇 。 本 篇 介绍 了 HIML 基础 、 文 本 、 图 像 和 超 链接 、CSS3 概述 、CSS3 高 级 应 用 、 
表格 与 <div> 标 签 、 列 表 、 表 单 、 多 媒体 、HTMLS5 新 特性 、JavaScript 基础 等 内 容 ， 使 读者 快速 掌握 开 
发 基本 内 容 ， 为 以 后 编程 黄 定 坚实 的 基础 。 

第 2 篇 :提高 篇 。 本 篇 介绍 了 绘制 图 形 、 文 件 与 拖 放 、JavaScript 对 象 编程 、 响 应 式 网 页 设计 、 响 
应 式 组 件 等 内 容 。 学 习 完 本 篇 ， 能 够 开发 一 些 中 小 型 应 用 程序 。 

第 3 篇 : 项 目 篇 。 本 篇 通过 制作 一 个 “游戏 公园 ”主题 的 网 站 ， 运 用 软件 工程 的 设计 思想 ， 让 读 
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者 学 习 如 何 进行 软件 项 目的 实践 开发 。 书 中 按照 “需求 分 析 一 系统 设计 一 主页 实现 一 博客 列表 实现 一 
博客 详情 实现 一 关于 我 们 ”的 流程 进行 介绍 ， 带 领 读者 亲身 体验 开发 项 目的 全 过 程 。 

强化 训练 分 册 共 18 章 ， 通 过 200 多 个 来 源 于 实际 生活 的 趣味 案例 ， 强 化 上 机 实战 ， 拓 展 和 提升 读 
者 对 实际 问题 的 分 析 与 解决 能 力 。 


本 书 特点 


回 


深入 浅 出 , 循序 渐进 。 本 书 以 初 、 中 级 程序 员 为 对 象 ， 先 从 语言 基础 学 起 (HTML 基础 、CSS 
基础 和 JavaScript 基础 ), 再 学 习 网 站 制作 常用 组 件 的 功能 实现 , 最 后 学 习 开发 一 个 完整 项 目 。 
讲解 过 程 中 步 又 详尽 、 版 式 新 颖 ， 使 读者 在 阅读 时 一 目 了 然 ， 从 而 快速 掌握 书 中 内 容 。 
实例 典型 ， 轻 松 易 学 。 通 过 例子 学 习 是 最 好 的 学 习 方 式 ， 本 书 通 过 “一 个 知识 点 、 一 个 例 
子 、 一 个 结果 、 一 段 评析 、 一 个 综合 应 用 ”的 模式 ， 透 彻 详尽 地 讲述 了 实际 开发 中 所 需 的 各 
类 知识 。 另 外 ， 为 了 便于 读者 阅读 程序 代码 ， 快 速 学 习 编程 技能 ， 书 中 几乎 每 行 代 码 都 提供 
了 注释 。 

微 课 视 频 ， 可 听 可 看 。 为 便于 读者 直观 感受 程序 开发 的 全 过 程 ， 书 中 大 部 分 章节 都 配备 了 教 
学 微 视频 。 这 些微 课 可 听 、 可 看 ， 能 快速 引导 初学 者 入 门 ， 使 其 感受 到 编程 的 快乐 和 成 就 感 ， 
进一步 增强 学 习 的 信心 。 

强化 训练 ， 实 战 提升 。 软 件 开发 学 习 ， 实 战 才 是 硬 道理 。 核 心 技术 分 册 中 提供 了 30 多 个 实战 
练习 ， 强 化 训练 分 册 中 更 是 给 出 了 200 多 个 源 自生 活 的 真实 案例 。 应 用 编程 思想 来 解决 这 些 
生活 中 的 难题 ， 不 但 能 锻炼 动手 能 力 ， 还 可 以 快速 提升 实战 技巧 。 如 果 在 实现 过 程 中 遇 到 问 
题 ， 可 以 从 资源 包 中 获取 相应 实战 的 源码 ， 进 行 解读 。 

精彩 栏目 ， 贴 心 提 醒 。 本 书 根据 需要 在 各 章 安 排 了 很 多 “注意 ”“ 说 明 ”“ 技 巧 ”等 小 栏 
目 ， 让 读者 可 以 在 学 习 过 程 中 更 轻松 地 理解 相关 知识 点 及 概念 ， 更 快 地 掌握 个 别 技术 的 应 用 
技巧 。 在 强化 训练 分 册 中 ， 更 设置 了 “PW@@®@@” 栏 目 ， 读 者 每 亲手 完成 一 次 实战 练 
习 ， 即 可 涂 上 一 个 序号 。 通 过 反复 实践 ， 可 真正 实现 强化 训练 和 提升 。 


本 书 资源 


为 帮助 读者 学 习 ， 本 书 配备 了 长 达 17 个 小 时 〈 共 162 集 ) 的 微 课 视 频 讲解 。 除 此 以 外 ， 还 为 读者 
提供 了 “Java Web 开发 资源 库 ” 系 统 ， 可 以 帮助 读者 快速 提升 编程 水 平和 解决 实际 问题 的 能 力 。 
本 书 和 Java Web 开发 资源 库 配 合 学 习 的 流程 如 图 所 示 。 
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Java Web 开发 资源 库 系统 的 主 界面 如 图 所 示 。 


~ 本 


在 学 习 本 书 的 过 程 中 ， 可 以 配合 技术 资源 库 和 实例 资源 库 的 相应 内 容 ， 全 面 提升 个 人 综合 编程 技 
能 和 解决 实际 开发 问题 的 能 力 ， 为 成 为 软件 开发 工程 师 打 下 坚实 基础 。 

对 于 数学 逻辑 能 力 和 英语 基础 较为 薄弱 的 读者 ， 或 者 想 了 解 个 人 数学 逻辑 思维 能 力 和 编程 英语 基 
础 的 用 户 ， 本 书 提供 了 数学 及 逻辑 思维 能 力 测试 和 编程 英语 能 力 测试 以 供 练习 和 测试 。 
面试 资源 库 提供 了 大 量 国内 外 软件 企业 的 常见 面试 真题 ， 同 时 还 提供 了 程序 员 职 业 规划 、 程 序 员 
面试 技巧 、 虚 拟 面试 系统 等 精彩 内 容 ， 是 程序 员 求 职 面试 的 绝 佳 指南 。 


读者 对 象 
回 “ 初 学 编程 的 自学 者 编程 爱好 者 
回 ”大 中 专 院 校 的 老师 和 学 生 相关 培训 机 构 的 老师 和 学 员 
做 毕业 设计 的 学 生 初 、 中 级 程序 开发 人 员 
程序 测试 及 维护 人 员 参加 实习 的 “菜鸟 ”程序 员 
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读者 服务 


学 习 本 书 时 ， 请 先 扫描 封底 的 权限 二 维 码 〈 需 要 乔 开 涂 层 ) 获取 学 习 权 限 ， 然 后 即 可 免费 学 习 书 
中 的 所 有 线 上 线 下 资源 。 本 书 所 附 赠 的 各 类 学 习 资 源 ， 读 者 可 登录 清华 大 学 出 版 社 网 站 
(www.tup.com.cn) ， 在 对 应 图 书页 面 下 获取 其 下 载 方式 。 也 可 扫描 图 书 封底 的 “ 文 泉 云 盘 ” 二 维 码 ， 
获取 其 下 载 方式 。 

为 了 方便 解决 本 书 疑难 问题 ， 读 者 朋友 可 加 我 们 的 企业 QQ: 4006751066〈 可 容纳 10 万 人 ) ,也 
可 以 登录 www.mingrisoftcom 留言 ， 我 们 将 竭诚 为 您 服务 。 


致 读者 


本 书 由 明日 科技 软件 开发 团队 组 织 编写 ， 明 日 科技 是 一 家 专业 从 事 软件 开发 、 教 育 培训 以 及 软件 
开发 教育 资源 整合 的 高 科技 公司 ， 其 编写 的 教材 既 注重 选取 软件 开发 中 的 必需 、 常 用 内 容 ， 又 注重 内 
容 的 易学 、 方 便 以 及 相关 知识 的 拓展 ， 深 受 读者 喜爱 。 其 编写 的 教材 多 次 荣获 “全 行业 优秀 畅销 品种 ” 
“中 国 大 学 出 版 社 优秀 畅销 书 ” 等 奖项 ， 多 个 品种 长 期 位 居 同 类 图 书 销售 排行 榜 的 前 列 。 

在 编写 本 书 的 过 程 中 ， 我 们 始终 本 着 科学 、 严 说 的 态度 ， 力 求 精益 求 精 ， 但 错误 、 疏 漏 之 处 在 所 
难免 ， 敬 请 广大 读者 批评 指正 。 

感谢 您 购买 本 书 ， 希 望 本 书 能 成 为 您 编程 路 上 的 领航 者 。 

“ 零 门 槛 ”编程 ， 一 切 错 有 可 能 。 

祝 读书 快乐 ! 


编 者 
2019 年 10 月 


目 


录 


第 1 篇 基 础 篇 


第 1 章 HTML 基础 .7 2 
名 4 视频 讲解 ，58 分钟 
1.1 HTML 概述 
1.1.1 什么 是 HIML..… 
1.1.2 HTML 的 发 展 历程 
1.2 HTML 文件 的 基本 结构 
1.2.1 HTML 的 基本 结构 …… 
1.2.2 HTML 的 基本 标签 ……- 
1.3 编写 第 一 个 HTML 文件 
1.3.1 HTML 文件 的 编写 方法 .. 
1.3.2 手工 编写 页 面 
1.3.3 ”使 用 可 视 化 软件 WebStorm 制作 页 面 . 


1.5.1 实战 一 :设置 背景 颜色 .. 攻 
1.5.2 ”实战 二 : 设置 链接 颜色 17 


2.2.2 文字 的 上 标 与 下 标 . 
2.2.3 ”特殊 文字 符号 


2.3.1 段落 标签 …… 
2.3.2 段落 的 换行 标签 
2.3.3 段落 的 原 格式 标签 . 


5 31 
2.4.1 水 平 线 标签 .……… 
2.4.2 ”水平线 标签 的 宽度 .. 

2.5 小 结 

2.6 实战 
2.6.1 实战 一 : 实现 一 则 天 气 预 报 
2.6.2 ”实战 二 : 实现 一 则 唐诗 …… 
2.6.3 实战 三 ;实现 商品 打折 清单 … 
2.6.4 实战 四 : 实现 一 个 人 物 字符 画 


第 3 章 ”图像 和 超 链接 .7 35 
i 39 
向 因 从 36 


3.1.1 图 像 的 基本 格式 .… 
3.1.2 添加 图 像 …… 
3.2 设置 图 像 属性 
3.2.1 图像 大 小 与 边框 .. 
3.2.2 ”图像 间距 与 对 齐 方式 … 
3.2.3 ”替换 文本 与 提示 文字 … 
3.3 ”链接 标签 .… 
3.3.1 文本 链接 
3.3.2 书签 链接 .… 
3.4 图 像 的 超 链接 
3.4.1 图 像 的 基本 链接 .. 
3.4.2 图 像 热 区 链接 .……… 
3.5 ”小结 
3.6 实战... 

3.6.1 实战 一 ， 显示 图 书 封面 ……… 
3.6.2 实战 二 : 制作 商品 评价 页 面 a 
3.6.3 ”实战 三 :制作 抽奖 页 面 ……………….. 50 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


第 4 章 CSS3 概述 
区 | 视频 讲解 小 时 6 分 钟 

4.1 CSS3 概述 ... 
4.1.1 CSS 的 发 展 史 
4.1.2 一 个 简单 的 CSS 示例 
4.2 CSS3 中 的 选择 器 
4.2.1 属性 选择 器 … 
4.2.2 类 和 了 DD 选择 器 . 
4.2.3 ” 伪 类 和 伪 元 素 选 择 器 . 
4.2.4 其 他 选择 器 
4.3 常用 属性 
4.3.1 文本 相关 属性 … 
4.3.2 ”背景 相关 属性 … 
4.3.3 列表 相关 属性 
直下 
4.5.1 实战 一 : 制作 登录 注册 页 面 
4.5.2 实战 二 : 制作 网 页 版 生日 贺卡 
4.5.3 ”实战 三 ， 实 现 个 人 主页 ……… 


第 5 章 CSS3 高 级 应 用 75 
5.1 框 模型 
5.1.1 外边 距 margin 
5.1.2 ”内 边 距 padding.. 
5$.1.3 边框 border … 
5.2 布局 常用 属性 . 
5.2.1 浮动 .……- 
5.2.2 ”定位 相关 属性 
5.3 动画 与 特效 . 
5.3.1 变换 (transform) 
5.3.2 过渡 (transition) .. 
5.3.3 动画 (animation) . 
5.4 小 结 . 
55 实践: 
5.5.1 实战 一 : 设置 手机 筛选 页 面 
5.5.2 ”实战 二 : 制作 横向 导航 .……… 本 
5S3， 实 虐 三 ; 制作 图 片 轮 括 -ss3sa2ss97 


VI 


第 6 章 表格 与 <div> 标 签 …....... 98 
名 + 视频 讲解 : 1 小 时 12 分 名 


6.1 
6.1.1 简单 表格 的 制作 .… 
6.1.2 表 头 的 设置 

6.2 表格 的 高 级 应 用 .. 
6.2.1 表格 的 样式 . 
6.2.2 表格 的 合并 . 
6.2.3 表格 的 分 组 . 

6.3 <div> 标签 .. 
6.3.1 <div> 标 签 的 介绍 . 
6.3.2 ” <div> 标签 的 应 用 . 

6.4 ” <span> 标签 
6.4.1 ” <span> 标签 的 介绍 .. 
6.4.2” <span> 标签 的 应 用 .… 

6.5 小 结 ... 

6.6 实战 … 

6.6.1 实战 一 : 制作 每 日 工作 计划 表 
6.6.2 ”实战 二 : 实现 网 页 版 工作 总 结 
6.6.3 ”实战 三 :制作 一 则 公司 公告 …………………… 


第 了 本 列表 145 
El 视频 讲解 : 
Os 116 


7.2 无 序列 表 
7.2.1 无 序列 表 标 签 . 
7.2.2 无 序列 表 属 性 . 

7.3 ”有 序列 表 
7.3.1 有 序列 表 标 签 . 
7.3.2 有 序列 表 属 性 . 

7.4 ”列表 的 谋 套 
Tl -征文 列表 的 诬 尖 二 -new 
7.4.2 无 序列 表 和 有 序列 表 的 网 套 

7.5 ”小结 

7.6 实战 
7.6.1 实战 一 : 制作 网 站 购买 提示 内 容 . 
7.6.2 实战 二 : 制作 QQ 联系 人 列表 .…… 
7.6.3 ”实战 三 ， 制 作 商 品 列表 内 容 …………………… 126 


8.1.2 表单 标签 <form> 
8.2 输入 标签 . 
8.2.1 文本 框 .. 
8.2.2 单 选 框 和 多 选 框 


8.2.4 文件 域 和 图 像 域 

8.3 文本 域 和 列表 . 

8.3.1 文本 域 … 
8.3.2 列表/ 菜单. .140 
8.4 小 结 142 


WS eset 
8.5.1 实战 一 : 制作 QQ 登录 页 面 


8.5.2 ”实战 二 : 制作 象棋 游戏 注册 页 面 .143 
8.5.3 ”实战 三 :制作 个 人 档案 ……… 143 
第 9 章 多 媒体 144 


bp : 1 小 时 5 
9.1 HTMLS5 多 媒体 的 简 述 . 
9.1.1 HTML4 中 多 媒体 的 应 用 
9.1.2 HTMLS 页 面 中 的 多 媒体 … 
9.2 ”多 媒体 元 素 基本 属性 … 
9.3 ”多 媒体 元 素 常用 方法 .… 
9.3.1 多 媒体 播放 时 的 方法 . 
9.3.2 canPlayType(type) 方 法 
9.4 多 媒体 元 素 重要 事件 
9.4.1 事件 处 理 方式 … 
9.4.2 事件 介绍 .…… 
9.4.3 事件 实例 
9.5 小 结 
9.6 实战 
9.6.1 实战 一 :制作 音乐 小 球 .. 
9.6.2 ”实战 二 : 加 载 一 段 视频 文件 … 
9.6.3 ”实战 三 ， 制 作 一 段 音频 文件 .… 


录 


第 10 章 HTML5 新 特性 ….. 158 
10.1 谁 在 开发 HTMLS5.. 
10.2 HTML5 的 新 特性 .. 
103 HTML5 和 HTML4 的 区 别 
10.3.1 HTML5 的 语法 变化 
10.3.2 HITMLS 中 的 标记 方法 ….………………… wt 
10.3.3 HTMLS 语法 中 需要 掌握 的 几 个 要 点 
10.4 新 增 和 废除 的 元 素 
10.4.1 新 增 的 结构 元 素 ………… 
10.4.2 ”新 增 的 块 级 〈block) 的 语义 元 素 
10.4.3 新 增 的 行内 〈inline) 的 语义 元 素 ……… 169 
10.4.4 新 增 的 嵌入 多 媒体 元 素 与 交互 性 元 素 …171 
10.4.5 新 增 的 input 元 素 的 类 型 
10.4.6 ”废除 的 元 素 .…… 
10.5 新 增 的 属性 和 废除 的 属性 
10.5.1 新 增 的 属性 … 
10.5.2 ”废除 的 属性 
10.6 小 结 . 
10.7 实战 . i 
实战 一 :制作 一 个 图 像 链 接 ………………. 177 


第 11 章 JavaScript 基础 178 
菇 4 视频 讲解 : 2 小 时 13 分 钟 
11.1 JavaScript 概述 
11.1.1 JavaScript 的 发 展 史 
11.1.2 JavaScript 在 HTML 中 的 使 用 
11.2 JavaScript 语言 基础 
11.2.1 数据 类 型 
11.2.2 运算 符 与 表达 式 
11.2.3 流程 控制 ……………… 
11.3 JavaScript 对 象 编程 
11.3.1 Window 窗口 对 象 . 
11.3.2 ”Document 文档 对 象 
11.4 JavaScript 事件 处 理 … 
11.4.1 鼠标 键盘 事件 
11.4.2 页 面 事件 …… 
本 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


11.6 实战 
11.6.1 实战 一 : 制作 九 九 乘法 表 


第 各 本 一 利 图 隐 weeeaase 206 
频 讲 解 : 1 小 时 15 
12.1 认识 HIMLS 中 的 画布 Canvas .………… 207 


12.1.1 Canvas 概述 
12.1.2 ”使 用 Canvas 绘制 矩 
12.2 绘制 基本 图 形 
12.2.1 绘制 直线 .… 
12.2.2 绘制 曲线 . 
12.2.3 ”绘制 圆 形 . 
12.3 绘制 变形 图 形 . 
12.3.1 绘制 平移 效果 的 
12.3.2 绘制 缩放 效果 的 图 形 
12.3.3 绘制 旋转 效果 的 图 形 
12.4 绘制 文字 
12.4.1 绘制 轮廓 文字 .. 
12.4.2 ”绘制 填充 文字 .. 
12.4.3 文字 相关 属性 .. 
12.5 小 结 
12.6 ”实战 
12.6.1 实战 一 ，Canvas 绘制 移动 的 正方 形 . 
12.6.2 ”实战 二 : 制作 游戏 弹 幕 效 果 ……………… 
12.6.3 ”实战 三 ,实现 计时 器 .ce 
第 13 章 文件 与 拖 放 

EE 视 
13.1 选择 文件 
13.1.1 通过 file 对 象 选择 文件 . 
13.1.2 ”使 用 Blob 接口 获取 文件 的 类 型 与 大 小 … 
1 有 和 aa 
13.2.1 FileReader 接口 的 方法 以 及 事件 …. 
13.2.2 ”使 用 readAsDataURL 方法 预览 图 片 . 
13.2.3 ”使 用 readAsText 方法 读 取 文本 文件 .. 
13.3” 拖 放 文件 


VII 


11.6.2 实战 二 : 制作 手机 抽奖 页 面 
11.6.3 实战 三 : 制作 购物 车 结算 页 面 


高 篇 


13.3.1 拖 放 页 面 元 素 .233 
13.3.2 DataTransfer 对 象 的 属性 与 方法 ………… 234 
13.3.3 ”使 用 effectAllowed 和 dropEffect 属性 设置 

拖 放 效果 
13.4 小结 
有 革 世 ee 
13.5.1 ”实战 一 : 实现 编辑 照片 墙 中 上 传 图 片 的 
13.5.2 ”实战 二 查看 网 页 源码 . 
13.5.3 实战 三 ， 预览 文件 功能 -ee 


第 14 章 ”JavaScript 对 象 编程 ….…………………………………… 238 
i : 1 小 时 2? 

14.1 Window 窗口 对 象 . 
14.1.1 Window 对 象 
14.1.2 对 话 框 (Dialog) . 
14.1.3 ”窗口 对 象 常用 操作 

14.2 Document 文档 对 象 
14.2.1 文档 对 象 概述 
14.2.2 文档 对 象 的 常用 属性 、 方 法 与 事件 
14.2.3 ”Document 对 象 的 应 用 .……………… 

14.3 JavaScript 与 表单 操作 ..…. 
14.3.1 在 JavaScript 中 访问 表单 
14.3.2 在 JavaScript 中 访问 表单 域 
1433 我 单 的 输 证 scrsmnses 

14.4 DOM 对 象 . 
14.4.1 DOM 概述 . 
14.4.2 DOM 对 象 节点 属性 
14.4.3 节点 的 几 种 操作 … 
14.4.4 获取 文档 中 的 指定 元 素 …… 
14.4.5 与 DHTML 相对 应 的 DOM 

14.5 小 结 . 

14.6 实战. 


实战 一 : 在 页 面 的 指定 位 置 显示 当前 日 期 ………266 


第 15 章 ”响应 式 网 页 设计 .pp 267 
各" 视频 讲解 : 38 分 钟 
15.1 E 


15.1.1 响应 式 网 页 设计 的 概念 - 
15.1.2 ”响应 式 网 页 设计 的 优 缺 点 和 技术 原理 .…268 
15.2 像素 和 屏幕 分 辨 率 269 
15.2.1 像素 和 屏幕 分 辩 率 .… 
15.2.2 设备 像素 和 CSS 像素 
15.3 视 口 ... 
15.3.1 视 口 
15.3.2 视 口 常用 属性 .. 
15.3.3 ”媒体 查询 
15.4 响应 式 网 页 的 布局 设计 .. 
15.4.1 常用 布局 类 型 

15.4.2 布局 的 实现 方式 ……… 
15.4.3 ”响应 式 布局 的 设计 与 实现 
二 二 小半 
15.6 实战... 


第 3 篇 项 


第 17 章 课程 设计 一 一 游戏 公园 .. 
i : 1 小 时 5 


17.1 课程 设计 目的 
17.2 ”游戏 公园 网 站 概述 .. 
17.2.1 网 站 特点 .………… 
17.2.2 ”功能 结构 

17.3 主页 的 设计 与 实现 . 
的 1 守 机 的 委 针 roo 
17.3.2 ”项 部 区 和 底部 区 功能 的 实现 . 
17.3.3 ”推荐 游戏 功能 的 实现 .… 
17.3.4 ”最 新 游戏 功能 的 实现 … 


第 16 章 响应 式 组 件 


实战 一 : 实现 主页 响应 式 实现 278 


16.1 响应 式 图 片 
16.1.1 方法 1: 使 用 <picture> 标 签 
16.1.2 方法 2: 使 用 CSS 图 片 . 

16.2 ”响应 式 视频 
16.2.1 方法 1: 使 用 <meta> 标 签 ……… 
16.2.2 方法 2: 使 用 HTMLS5 手机 播放 器 . 

16.3 ”响应 式 导航 菜单 
16.3.1 方法 1: CSS3 响应 式 菜单 . 
16.3.2 方法 2: JavaScript 响应 式 菜单 

16.4 响应 式 表格 
16.4.1 方法 1: 隐藏 表格 中 的 列 … 
16.4.2 方法 2: 滚动 表格 中 的 列 … 
16.4.3 方法 3: 转换 表格 中 的 列 

16.5 小 结 . 

16.6 ”实战 . 
实战 一 : 实现 一 个 响应 式 菜单 


目 篇 


17.4 博客 列表 的 设计 与 实现 
17.4.1 博客 列表 的 设计 
17.4.2 博客 列表 的 实现 

17.5 博客 详情 的 设计 与 实现 
A 1 | | | 
17.5.2 博客 详情 的 实现 ………… 

17.6 关于 我 们 的 设计 与 实现 
17.6.1 关于 我 们 的 设计 .… 


17.6.2 ”关于 我 们 的 实现 
17.7 小 结 


基础 篇 


各 吾 吾 于 吾 于 于 于 于 于 至 


第 1 章 HTML 基础 

第 2 章 文本 

第 3 章 图 像 和 起 链接 

第 4 章 CSS3 概述 

第 5 章 CSS3 高 级 应 用 
第 6 章 表格 与 <div> 标 答 
第 7 章 列表 

第 8 章 表单 

第 9 章 多 媒体 

第 10 章 HTML5 新 特性 
第 11 章 JavaScript 基础 


本 篇 介绍 了 HTML 基础 、 文 本 、 图 像 和 超 链 接 、C553 概述 、C553 高 级 应 用 、 
表格 与 div 标签 、 列 表 、 表 单 、 多 媒体 、HTML5 新 将 性 、JavaScript 基础 等 内 容 ， 
使 读者 快速 掌 担 开发 基本 内 容 ， 为 以 后 编程 黄 定 坚实 的 基础 。 


第 章 


HTML 基础 
( 到 视频 讲解 : 58 分 钟 ) 


浏览 网 站 已 经 成 为 人 们 生活 和 工作 不 可 或 缺 的 一 部 分 ,网 页 页 面 也 随 着 技术 的 
发 展 越 来 越 丰富 ， 越 来 越美 现 ， 网 页 上 不 仅 有 文字 、 图 片 ， 还 有 影像 、 动 画 效果 等 。 
而 HTML 语言 就 可 以 实现 网 页 设计 和 制作 ， 尤 其 是 可 以 开发 动态 网 站 。 那 么 什么 
是 HTML? 如 何 编写 HTML 文件 ? 使 用 什么 工具 编写 呢 ? 带 着 这 些 问题 我 们 来 学 
习 本 章 内 容 。 

学 习 摘 要 : 

WI HTML 的 发 展 历程 

MW ”HTML 的 基本 结构 

WI HTML 的 基本 标签 

WI HTML 文件 的 编写 方法 


第 1 章 HIML 基础 


1.1 HTML 概述 


1.1.1 什么 是 HTML 


HTML 语言 是 纯 文 本 类 型 的 语言 ， 它 是 Intermet 上 用 于 编写 网 页 的 主要 语言 ， 使 用 HTML 编写 的 
网 页 文件 也 是 标准 的 纯 文本 文件 。 

HTML 语言 可 以 使 用 文本 编辑 器 (如 Windows 系统 中 的 记事 本 程序 ) 打开 它 ， 查 看 其 中 的 HTML 
源 代码 ， 也 可 以 在 用 浏览 器 打开 网 页 时 ， 通 过 选择 “查看 ”一 “ 源 文件 ”命令 ， 查 看 网 页 中 的 HTML 
代码 。HTML 文件 可 以 直接 由 浏览 器 解释 执行 ， 而 无 须 编译 。 当 用 浏览 器 打开 网 页 时 ， 浏 览 器 读 取 网 
页 中 的 HTML 代码 ， 分 析 其 语法 结构 ， 然 后 根据 解释 的 结果 显示 网 页 内 容 。 

HTML 语言 是 一 种 简易 的 文件 交换 标准 ， 它 旨 在 定义 文件 内 的 对 象 和 描述 文件 的 逻辑 结构 ， 而 并 
不 定义 文件 的 显示 。 由 于 HTML 所 描述 的 文件 具有 极 高 的 适应 性 , 所 以 特别 适合 于 WWW (World Wide 
Web， 万 维 网 ) 的 出 版 环境 。 


1.1.2 HTML 的 发 展 历程 


HTML 的 历史 可 以 追溯 到 很 久 以 前 。1993 年 HTML 首次 以 因特网 草案 的 形式 发 布 。20 世纪 90 年 
代 的 人 见证 了 HTML 的 大 幅 发 展 ， 从 2.0 版 ， 到 3.2 版 和 4.0 版 ， 再 到 1999 年 的 4.01 版 ， 一 直到 现在 
正 逐 步 普及 的 HTML5。 

在 快速 发 布 了 HTML 的 前 4 个 版 本 之 后 ， 业 界 普遍 认为 HTML 已 经 “无 路 可 走 ” 了 ， 对 Web 标 
准 的 焦点 也 开始 转移 到 了 XML 和 XHTML，HTML 被 放 在 次 要 位 置 。 不 过 在 此 期 间 ，HTML 体现 了 顽 
强 的 生命 力 ， 主 要 的 网 站 内 容 还 是 基于 HTML 的 。 为 能 支持 新 的 Web 应 用 ， 同 时 克服 现 有 的 缺点 ， 
HTML 迫切 需要 添加 新 功能 ， 制 定 新 规范 。 

为 了 将 Web 平台 提升 到 一 个 新 的 高 度 ,在 2004 年 WHATWG(Web Hypertext Application Technology 
Working Group，Web 超 文本 应 用 技术 工作 组 ) 成 立 了 ， 他 们 创立 了 HTMLS 规范 ， 同 时 开始 专门 针对 
Web 应 用 开发 新 功能 ， 这 被 WHATWG 认为 是 HTML 中 最 薄弱 的 环节 。Web 2.0 这 个 新 词 也 就 是 在 那 
个 时 候 被 发 明 的 ， 开 创 了 Web 的 第 二 个 时 代 ， 旧 的 静态 网 站 逐渐 让 位 于 需要 更 多 特性 的 动态 网 站 和 社 
交 网 站 。 

因为 HTML5 能 解决 非常 实际 的 问题 ， 得 益 于 浏览 器 的 实验 性 反馈 ，HTML5 规范 也 得 到 了 持续 地 
完善 ，HTML5 以 这 种 方式 迅速 地 融入 了 对 Web 平台 的 实质 性 改进 中 。HTMLS 成 为 HTML 语言 的 新 
一 代 标 准 。 


1.2 HTML 文件 的 基本 结构 


一 个 HTML 文件 是 由 一 系列 的 元 素 和 标签 组 成 的 .元素 是 HTML 文件 的 重要 组 成 部 分 ,而 HTMIL5 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


用 标签 来 规定 元 素 的 属性 和 它 在 文件 中 的 位 置 。 本 节 将 对 HTML 文件 的 元 素 、 标 签 以 及 文件 结构 进行 
详细 介绍 。 


1.2.1 HTML 的 基本 结构 


1. 标签 


HTML 的 标签 分 为 单独 出 现 的 标签 (以 下 简称 为 单独 标签 ) 和 成 对 出 现 的 标签 (以 下 简称 为 成 对 
标签 ) 两 种 。 

加 单独 标签 。 

单独 标签 的 格式 为 < 元 素 名 称 >， 其 作用 是 在 相应 的 位 置 插 入 元 素 ， 例 如 ，<br> 标 签 就 是 单独 出 现 
的 标签 ， 意 思 在 该 标签 所 在 位 置 插入 一 个 换行 符 。 

回 ”成 对 标签 。 

大 多 数 标签 都 是 成 对 出 现 的 ， 是 由 首 标签 和 尾 标签 组 成 的 。 首 标签 的 格式 为 < 元 素 名 称 >， 尾 标签 
的 格式 为 </ 元 素 名 称 >， 其 语法 格式 如 下 。 


01 ”< 元 素 名 称 > 要 控制 的 元 素 </ 元 素 名 称 > 
成 对 标签 仅 对 包含 在 其 中 的 文件 部 分 发 生 作用 ， 例 如 ，<tile> 和 </title> 标 签 就 是 成 对 出 现 的 标签 ， 
用 于 界定 标题 元 素 的 范围 ， 也 就 是 说 ，<tile> 和 </title> 标 签 之 间 的 部 分 是 此 HTMLS5 文件 的 标题 。 


NC 人 明 


在 HTML 标签 中 不 区 分 大 小 写 。 例 如 ，<HTML>、<Html> 和 <html>， 其 结果 都 是 一 样 的 。 
在 每 个 HTML 标签 中 , 还 可 以 设置 一 些 属性 ， 用 来 控制 HTML 标签 所 建立 的 元 素 。 这 些 属性 将 位 
于 首 标签 ， 因 此 ， 首 标签 的 基本 语法 如 下 。 
01 ”< 元 素 名 称 属性 1=" 值 1" 属性 2=" 值 2"...> 
而 尾 标 签 的 建立 方式 则 为 : 
01 ”</ 元 素 名 称 > 
因此 ， 在 HTML 文件 中 某 个 元 素 的 完整 定义 语法 如 下 。 
01 ”< 元 素 名 称 ”属性 1=" 值 1" 属性 2=" 值 2".….> 元 素 资料 </ 元 素 名 称 > 
NE 位 轨 
在 HTML 语法 中 ,设置 各 属性 所 使 用 的 “"” 可 省 略 。 
2 元 于 
当 组 HTML 标签 将 一 段 文字 包 含 在 中 间 时 ,这 段 文 字 与 包含 文字 的 HTML 标签 被 称 为 一 个 
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在 HIML 语法 中 ,每 个 由 HTML 标签 与 文字 所 形成 的 元 素 内 ， 还 可 以 包含 另 一 个 元 素 。 因 此 ， 整 
个 HTML 文件 就 像 是 一 个 大 元 素 包含 了 许多 小 元 素 。 

在 所 有 的 HTML 文件 中 ， 最 外 层 的 元 素 是 由 <html> 标 签 建 立 的 。 在 <html> 标 签 所 建立 的 元 素 中 ， 
包含 了 两 个 主要 的 子 元 素 ， 这 两 个 子 元 素 是 由 <head> 标 签 与 <body> 标 签 所 建立 的 。<head> 标 签 所 建立 
的 元 素 内 容 为 文件 标题 ， 而 <body> 标 签 所 建立 的 元 素 内 容 为 文件 主体 。 

3. HTML 文件 结构 


在 介绍 HIML 文件 结构 之 前 ， 先 来 看 一 个 简单 的 HTML 文件 及 其 在 浏览 器 上 的 显示 结果 。 
下 面 使 用 文件 编辑 器 (如 Windows 自 带 的 记事 本 ) 编写 一 个 HTML 文件 ， 代 码 如 下 。 


01 <html> 

02 <head> 

03 ”<title> 文 件 标题 </title> 
04 </head> 

05 <body> 

06 ”文件 正文 

07 </body> 

08 </html> 


在 浏览 器 中 运行 代码 ， 运 行 效果 如 图 1.1 所 示 。 
从 上 述 代码 和 运行 效果 图 中 可 以 看 出 HTML 文件 的 基本 结构 如 图 1.2 所 示 。 


BD xi x 文件 开始 一 一 Fin》 


文件 头 ead> 
CG Ofilel/Dy.. 人 女 | : ee 
洪 应 用 “点击 这 里 导入 书 答 。 开始 head> 
文件 体 ody> 
SE 一 | 人 E 文 
body> 


文件 结束 一 一 一 [</html> 


图 1.1 HTML 示例 运行 效果 图 图 1.2 HTML 文件 的 基本 结构 


其 中 ， <head> 与 </head> 之 间 的 部 分 是 HTML 文件 的 文件 头 部 分 , 用 以 说 明文 件 的 标题 和 整个 文件 
的 一 些 公共 属性 。<body> 与 </body> 之 间 的 部 分 是 HTML 文件 的 主体 部 分 ， 下 面 介绍 的 标签 ， 如 果 不 
加 特别 说 明 ， 均 是 嵌 套 在 这 一 对 标签 中 使 用 的 。 


1.2.2 HTML 的 基本 标签 


1. 文件 开始 标签 <html> 


在 任何 一 个 HTML 文件 里 , 最 先 出 现 的 HTML 标签 就 是 <html>， 它 用 于 表示 该 文件 是 以 超 文本 标 
识 语言 CHIML ) 编写 的 。<html> 是 成 对 出 现 的 ， 首 标签 <html> 和 尾 标签 <html> 分 别 位 于 文件 的 最 前 
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面 和 最 后 面 ， 文 件 中 的 所 有 文件 和 HIML 标签 都 包含 在 其 中 。 例 如 : 


01 <html> 
02 ”文件 的 全 部 内 容 
03 </html> 


该 标签 不 带 任何 属性 。 

事实 上 ， 现 在 常用 的 Web 浏览 器 (例如 正 ) 都 可 以 自动 识别 HTML 文件 ， 并 不 要 求 有 <html> 标 
签 ， 也 不 对 该 标签 进行 任何 操作 。 但 是 ， 为 了 提高 文件 的 适用 性 ， 使 编写 的 HTML 文件 能 适应 不 断 变 
化 的 Web 浏览 器 ， 还 是 应 该 养 成 使 用 这 个 标签 的 习惯 。 


2. 文件 头 部 标签 <head> 


习惯 上 , 把 HTML 文件 分 为 文件 头 和 文件 主体 两 个 部 分 。 文件 主体 部 分 就 是 在 Web 浏览 器 窗口 的 
用 户 区 内 看 到 的 内 容 ， 而 文件 头 部 分 用 来 规定 该 文件 的 标题 〈 出 现在 Web 浏览 器 窗口 的 标题 栏 中 ) 和 
文件 的 一 些 属性 。 

<head> 是 一 个 表示 网 页 头 部 的 标签 。 在 由 <head> 标 签 所 定义 的 元 素 中 ， 并 不 放置 网 页 的 任何 内 容 ， 
而 是 放置 关于 HTML 文件 的 信息 ， 也 就 是 说 它 并 不 属于 HTML 文件 的 主体 。 它 包含 文件 的 标题 、 编 码 
方式 及 URL 等 信息 。 这 些 信息 大 部 分 是 用 于 提供 索引 、 辨 认 或 其 他 方面 的 应 用 。 

写 在 <head> 与 </head> 中 间 的 文本 ， 如 果 又 写 在 <title> 标 签 中 ， 表 示 该 网 页 的 名 称 ， 并 作为 窗口 的 
名 称 显示 在 这 个 网 页 窗口 的 最 上 方 。 


位 田 


如 果 HTML 文件 并 不 需要 提供 相关 信息 时 ， 可 以 省 略 <head> 标 签 。 


3. 文件 标题 标签 <title> 


每 个 HTML 文件 都 需要 有 一 个 文件 名 称 。 在 浏览 器 中 ， 文 件 名 称 作 为 窗口 名 称 显示 在 该 窗口 的 最 
上 方 。 这 对 浏览 器 的 收藏 功能 很 有 用 。 如 果 浏 览 者 认为 某 个 网 页 对 自己 很 用， 今后 想 经 常 阅读 ， 可 
以 选择 正 浏览 器 “收藏 ”菜单 中 的 “添加 到 收藏 夹 ”命令 将 它 保存 起 来 ， 供 以 后 调用 。 网 页 的 名 称 要 
写 在 <title> 和 </title> 之 间 ， 并 且 <title> 标 签 应 包含 在 <head> 与 </head> 标 签 之 中 。 

HTML 文件 的 标签 是 可 以 嵌 套 的 ， 即 在 一 对 标签 中 可 以 嵌入 另 一 对 子 标 签 ， 用 来 规定 母 标签 所 含 
范围 的 属性 或 其 中 某 一 部 分 内 容 ， 嵌 套 在 <head> 标 签 中 使 用 的 主要 有 <title> 标 签 。 


4. 元 信息 标签 <meta> 


meta 元 素 提供 的 信息 是 用 户 不 可 见 的 ， 它 不 显示 在 页 面 中 ， 一 般 用 来 定义 页 面 信息 的 名 称 、 关 键 
字 、 作 者 等 。 在 HTML 中 ，meta 标记 不 需要 设置 结束 标记 ， 在 一 对 尖 括 号 内 就 是 一 个 meta 内 容 ， 而 
在 一 个 HTML 头 页 面 中 可 以 有 多 个 meta 元 素 。 meta 元 素 的 属性 有 两 种 : name 和 http-equiv, 其 中 name 
属性 主要 用 于 描述 网 页 ， 以 便于 搜索 引擎 机 器 人 查找 、 分 类 。 

5. 页 面 的 主体 标签 <body> 


网 页 的 主体 部 分 以 标签 <body> 标 志 它 的 开始 ， 以 标签 </body> 标 志 它 的 结束 。 <body> 标 签 是 成 对 出 
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现 的 。 在 网 页 的 主体 标签 中 常用 属性 设置 如 表 1.1 所 示 。 
表 1.1 body 元 素 的 属性 


属 性 描 述 
text 设 定 页 面 文字 的 颜色 
bgcolor 设 定 页 面 背景 的 颜色 
backeround 设 定 页 面 的 背景 图 像 
bgproperties 设 定 页 面 的 背景 图 像 为 固定 ， 不 随 页 面 的 滚动 而 滚动 
link 设 定 页 面 默认 的 链接 颜色 
alink 设 定 鼠 标 正在 单 击 时 的 链接 颜色 
vlink 设 定 访问 过 后 的 链接 颜色 
topmargin 设 定 页 面 的 上 边 距 
leftmargin 设 定 页 面 的 左边 距 


6. 页 面 的 注释 

在 网 页 中 ， 除 了 以 上 这 些 基本 标签 外 ， 还 包含 一 种 不 显示 在 页 面 中 的 元 素 ， 那 就 是 代码 的 注释 文 
字 。 适 当 的 注释 可 以 帮助 用 户 更 好 地 了 解 网 页 中 各 个 模块 的 划分 ， 也 有 助 于 以 后 对 代码 的 检查 和 修改 。 
给 代码 加 注释 ， 是 一 种 很 好 的 编程 习惯 。 在 HIMLS 文档 中 ， 注 释 分 为 3 类 : 在 文件 开始 标签 <html> 
和 结束 标签 </html> 中 的 注释 、 在 CSS 样式 中 的 注释 和 在 JavaScript 中 的 注释 ， 其 中 在 JavaScirpt 中 的 
注释 又 有 两 种 形式 : 单行 注释 和 多 行 注 释 。 下 面 将 对 这 3 类 注释 的 具体 语法 进行 介绍 。 

(1) 在 文件 开始 标签 <html> 和 结束 标签 </html> 中 的 注释 ， 具 体 语法 如 下 。 

01 ”<!-- 注 释 的 文字 --> 

注释 文字 的 标记 很 简单 ， 只 需要 在 语法 中 “注释 的 文字 ”的 位 置 上 添加 需要 的 内 容 即 可 。 

(2) 在 CSS 样式 中 的 注释 ， 具 体 语法 如 下 。 

01 A* 注 释 的 文字 */ 

在 CSS 样式 中 注释 时 ， 只 需要 在 语法 中 “注释 的 文字 ”的 位 置 上 添加 需要 的 内 容 即 可 。 

(3) 在 JavaScript 中 的 注释 有 两 种 形式 : 单行 注释 和 多 行 注释 。 

单行 注释 的 具体 语法 如 下 。 

01 /注释 的 文字 

注释 文字 的 标记 很 简单 ， 只 需要 在 语法 中 “注释 的 文字 ”的 位 置 上 添加 需要 的 内 容 即 可 。 


全 o 注 总 
在 JavaScript 中 添加 单行 注释 时 ， 只 需要 在 语法 中 “注释 的 文字 ”的 位 置 上 添加 需要 的 内 容 
即 司 。 
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多 行 注释 的 具体 语法 如 下 。 
01 /注释 的 文字 */ 
在 JavaScript 脚本 中 添加 多 行 注释 时 ， 只 需要 在 语法 中 “注释 的 文字 ”的 位 置 上 添加 需要 的 注释 内 
容 即 可 。 
稳 s 注 意 
在 JavaScript 中 添加 多 行 注释 或 单行 注释 时 ， 其 形式 不 是 一 成 不 变 的， 在 进行 多 行 注释 时 ， 单 
行 注释 也 是 有 效 的 。 运 用 “// 注 释 的 文字 ”和 运用 “/* 注 释 的 文字 */” 对 每 一 行文 字 进 行 注 释 ， 其 达 
到 的 效果 是 一 样 的 。 


@ ness 
在 HTML 代码 中 ， 注 释 语法 使 用 错误 时 ， 浏 览 器 将 注释 视 为 文本 内 容 ， 注 释 内 容 会 显示 在 页 
面 中 。 例 如 ， 下 面 给 出 的 一 个 网 页 代码 中 有 4 处 注释 使 用 错误 的 情况 。 


01 <!- 这 里 可 以 加 注释 吗 ? 一 > 错误 1: <!DOCTYPE html> 之 前 不 可 以 添加 注释 
02 <IDOCTYPE html> 


06 itle>8 吉林 限 = 

0 

09 margin-left: 20px; 

10 color: red; 

11 font-size: 20px; 

和 font-family: fantasy; 

13 } 

14 </style> 

15 </head> 

16 <body> 

17 <div class="cen"> 

18 <h4 class="err" 

19 <div> 

20 <iframe id="top" name="top" scrolling="No" src="inc/top.html" height="240" frameborder="0" 
width="947"></iframe> 

| </div> 

22 <h4 class="err">k-- 注释 2: 本身 我 也 是 一 个 注释 --> </h4> 

23 </div> 

0 

25 </html> 


26 ”<!-- 也 可 以 在 <html> 标 签 后 面 添加 注释 -> 


用 谷歌 浏览 器 打开 这 个 HTML5 文件 ， 运 行 效果 如 图 1.3 所 示 。 
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<- 吉 林寺 -> 吉林 省 明日 和 法 挟 X。 十 


片 注 释 1 : 本 身 我 是 一 个 注释 */ 


NR 明日 是 专业 的 图 书写 作 机 构 > 
数字 产品 体验 报名 


产品 体验 报 各 > 


明日 科 技 


首页 关于 明日 明日 编程 司 典 明日 软件 加 入 我 们 


咨询 电话 ， 0431-84973981/84978982 


欢迎 来 到 吉林 省 明日 科技 有 限 公司 


<-- 注释 2 : 本 身 我 也 是 一 个 注释 -> 


图 1.3 错误 使 用 代码 注释 的 运行 效果 


1.3 编写 第 一 个 HIML 文件 


1.3.1 HTML 文件 的 编写 方法 


编写 HTML 文件 主要 有 3 种 方法 ， 以 下 分 别 进行 介绍 。 
(1) 手工 直接 编写 。 由 于 HTML 语言 编写 的 文件 是 标准 的 ASCII 文本 文件 ， 所 以 我 们 可 以 使 用 
任何 的 文本 编辑 器 来 打开 并 编写 HTML 文件 ， 如 Windows 系统 中 自 带 的 记事 本 。 
(2) 使 用 可 视 化 软件 。 可 以 使 用 WebStorm、Dreamweaver、Sublime 等 软件 进行 可 视 化 的 网 页 编 
辑 制 作 。 
(3) 由 Web 服务 器 一 方 实时 动态 生成 。 这 需要 进行 后 端的 网 页 编程 来 实现 ， 如 JSP、ASP、PHP 
等 ， 一 般 情况 下 都 需要 数据 库 的 配合 。 


1.3.2 手工 编写 页 面 
下 面 先 使 用 记事 本 来 编写 第 一 个 HTML 文件 ， 操 作 步骤 如 下 。 


(1) 选择 “开始 ”一 “程序 ”一 “附件 ”一 “记事 本 ”程序 ， 打 开 Windows 系统 自 带 的 记事 本 ， 
如 图 1.4 所 示 。 


图 1.4 打开 记事 本 
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(2) 在 记事 本 中 直接 输入 HTML 代码 ， 具 体 代码 如 下 。 


01 <html> 

02 <head> 

03 <title> 简 单 的 HTML 文件 </title> 

04 </head> 

05 <body text="blue"> 

06 ”<h2 align="center">HTML5 初 露 端倪 </h2> 
07 <hr> 

08 ”<p> 让 我 们 一 起 体验 超 炫 的 HTML5 旅程 吧 </p> 
09 </body> 

10 </html> 


(3) 输入 代码 后 ， 记 事 本 中 显示 出 代码 的 内 容 ， 如 图 1.5 所 示 。 


<head> 
<title> 简 单 的 HTHL 文 件 《/title> 
‘</head> 


<body text"blue”> 
ha align=“center”>HT 了 LL 初 震 端 贷 </h2> 


<hr> 
人 ?让 我 们 一 起 体验 超 粒 的 HL 旅程 吧 x/P> ss 
Seay | 加 ER 由 EE) |UTFS "| [ess ] [|] 


图 1.5 显示 了 代码 的 记事 本 图 1.6 “另存 为 ”对 话 框 


(5) 在 “另存 为 ”对 话 框 中 ,首先 选择 存盘 的 文件 夹 ， 然 后 设置 “保存 类 型 ”为 “所 有 文件 ”“ 编 
码 ” 为 UTF-8， 并 填写 文件 名 ， 例 如 ， 将 文件 命名 为 1-2.html， 最 后 单 击 “保存 ”按钮 。 

(6) 关闭 记事 本 ， 回 到 存盘 的 文件 夹 ， 双 击 如 图 1.7 所 示 的 1-2.html 文件 ， 可 以 在 浏览 器 〈 推 荐 
谷歌 浏览 器 ) 中 看 到 最 终 页 面 效果 ， 如 图 1.8 所 示 。 


”新 建立 全 大 ” 四 | 再 六 站 理 w 二 
leV//DVDocuments/ 呆 建 立 件 送 /DesktoP/1-2html 妆 时 
共享 ”天 建文 件 灾 -HO 
SA 书 于， 到 
人 日 时 2 xh pe 
ET HTML5 初 圳 端倪 


让 我 们 一 起 体验 超 迷 的 HTM15 旅 程 吧 


图 1.7 保存 好 的 HTML 文件 图 1.8 页 面 效果 


1.3.3 ”使 用 可 视 化 软件 WebStorm 制作 页 面 


WebStorm 是 jetbrains 公司 旗下 一 款 JavaScript 开发 工具 。 软 件 支 持 不 同 浏览 器 的 提示 ， 还 包括 所 
有 用 户 自 定义 的 函数 〈 项 目 中 )。 代 码 补 全 包含 了 所 有 流行 的 库 ， 如 jQuery、YUI、Dojo、Prototype、 
Mootools 和 Bindows 等 。 被 广大 JavaScript 开发 者 誉 为 Web 前 端 开 发 神器 、 最 强大 的 HTML5 编辑 器 、 
最 智能 的 JavaScript IDE 等 。 

下 面 以 WebStorm 英文 版 为 例 ， 首 先 说 明 安装 WebStorm11.0.4 的 过 程 ， 然 后 再 介绍 制作 HTML5 


筷 ] 音 
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页 面 的 方法 。 
1. 下 载 与 安装 


(1) 首先 打开 浏览 器 ， 输 入 网 址 https://wwwjetbrains.com/webstorm/download/previous.html， 进 入 
WebStorm 官网 地 址 下 载 页 ， 如 图 1.9 所 示 。 
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图 Webstorm 


jetbrainscom 


Version 11.0 


图 1.9 WebStorm 官网 地 址 下 载 页 
(2) 单 击 11.0.4 for Windows(exe) 链 接 ， 开 始 下 载 WebStorm-11.0.4.exe 程序 ， 如 图 1.10 所 示 。 
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图 1.10 下 载 WebStorm-11.0.4 程序 


(3) 下 载 完成 之 后 ， 双 下 


二 打开 WebStorm-11.0.4.exe 这 个 应 用 程序 ， 如 图 1.11 所 示 。 
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(4) 单 击 Next 按钮 , 将 显示 如 图 1.12 所 示 的 界面 , 在 该 界面 单 击 Browse 按钮 选择 一 个 安装 路 径 
(默认 的 路 径 是 C:\Program Files\JetBrains\WebStorm 11.0.4)。 


一 一 一 fr 
加 Webstormsetup 本 如 webstorm setup ee | 
Choose Install Location 
Welcome to the WebStorm Setup 加 Choose the folder in which to inctall WebStorm. 
Wizard | 
This wizard will guide you through the Insiallaton of Satup wll netall WetStorm in the folowing folder To nstall in a dfferent folder, cick 
WebStorm. 


| 
Ris recommended that you clese all other applications 
before starting Setup. This will make t Possible to update 
relevant system files witheut having to reboot your 
computer 


Clhck Nexe to cortinue. 


Space required: 484.4vB 
Space availeble: 47.2GB 


| Eee Eeeal| | EEC EC 


图 1.11 开始 安装 界面 图 1.12 选择 安装 路 径 


(5) 单 击 Next 按钮 ， 弹 出 选择 安装 选项 的 界面 ， 这 里 需要 选中 全 部 的 复 选 框 ， 如 图 1.13 所 示 。 
(6) 单 击 Next 按钮 ， 选 择 开 始 菜单 文件 夹 ， 默 认为 JetBrains， 如 图 1.14 所 示 。 
你 webstorm setup [一 一 | LE 了 | 


Inotallation Optons Chooae Start Menu Folder 
Corfigure your Webstorm inctalaton 


Choosea Start Menu folder for the WabStorm shortcuts, 


Select the Stert Nenu folder n which be ‘would like to create the program’s shortcuts, You 
网 Greate pesktop shorteut | con atso enter a name to creale a new foler, 


|| 


Create assocatlons 


让 | sammsanes 性 


Ee 


Er ss jn] (cm 


1.13 ”选择 安装 选项 1.14 选择 开始 菜单 文件 夹 
(7) 单 击 Install 按钮 ， 显 示 安 装 的 进度 条 ， 如 图 1.15 所 示 。 
(8) 安装 进程 结束 后 ， 单 击 Next 按钮 ， 弹 出 如 图 1.16 所 示 界 面 ， 在 该 界面 单 击 Finish 按钮 ， 完 
成 对 WebStorm 11.0.4 的 安装 。 
2. 创建 HTML 文件 和 运行 HTML 程序 


(1) 单 击 “开始” 按钮 以 打开 “开始 ”菜单 ， 接 着 在 “所 有 程序 ”列表 中 选择 JetBrains WebStorm 
11.0.4 命令 ， 启 动 WebStorm 软件 的 主 程序 ， 其 主 界面 如 图 1.17 所 示 。 
(2) 选择 菜单 栏 中 的 File 一 New Project 命令 ， 新 建 一 个 工程 ， 如 图 1.18 所 示 。 


og 


Completing the WebStorm Setup 
Wizard 


Webstorm has been installed on your computer. 


Gia pn to deen hs wea | 


aoch Concel 


图 1.16 安装 完成 


To mrprove your expenence, we waud ke in colect data on the Plagns and feares 


you use No personal cata vA be colected. An archwe of a fen Kiobytes wl be sert 
weekdy. 


EC 


Close Project 
Rename Projecr- 


图 1.18 新 建 HIML 工程 
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(3) 在 Location 文本 框 中 输入 工程 存放 的 路 径 ， 也 可 以 单 击 国 按钮 选择 路 径 ， 如 图 1.19 所 示 。 然 
后 单 击 Create 按钮 ， 完 成 工程 的 创建 。 


Pr New project 
5 Boilerplate 
人 Web Starter Kit Lecation | DADocuments\untitled 国 
圳 React Starter Kit 
Twiter sootstrap 
Foundation 
合 Angulans 
园 Nodejs Express App 


图 1.19 输入 工程 存放 的 路 径 


(4) 选 定 新 建 好 的 HTML 工程 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 New 一 HIML File 命令 ,创建 
一 个 HTML 文件 ， 如 图 1.20 所 示 。 
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Copy Reference Corl+Alk+ Shift+C 
看 paste Clty 
Find Usages Ak+F7 
Find in Path.. Cul+ShiteF 也 CoffeeScript Fie 
Replace in Path.. Cul+Shiten 各 Jade Fle 
Dp cad B xstT stylesheet 
a Edit File Templates. 
Add to Favorites 
Show Image Thumbnails Cerl+Shift+T 
Local History 
{5 Synchronize untidedl' 
Show in Explorer 
L File Path Chrl+Ak+F12 
目 Creates @ compare With.. cap 


1.20 创建 HIML 文件 


(5) 选择 完成 之 后 会 弹出 如 图 1.21 所 示 的 新 窗口 ,在 Name 文本 框 中 输入 文件 名 ,在 这 里 将 文件 
名 命名 为 index.html， 并 在 Kind 下 拉 列 表 框 中 选择 HTML 5 file。 

(6) 单 击 OK 按钮 ， 弹 出 新 建 好 的 HIML5 文件 ， 如 图 1.22 所 示 。 

(7) 接 下 来 ， 即 可 编辑 HTML5 文件 ， 在 <body> 标 签 中 输入 文字 ， 如 图 1.23 所 示 。 


图 1.21 为 HIML 5 文件 命名 


a ntited ~ ID\Documenrs\untiled] -~\index html- Webstorm 1104 eo 
Fie Elit View Navigate Code Relactor Run Took VCS Window Help 
Duntited , 固 indexhtml EIP 站 唤 | 包 
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SDOCTYPE hrzl> 
Bi 1" 
heady 


</head> 
body> 


</body> 
xhtml 中 


‘meta charset="UTF-8"> 
etitleEudouuiaey 


Help Make WebStorm Better 

To mmprove your experence, we wad ke to colect data on the pugns and eabures 
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图 1.22 ”新建 好 的 HIML5 文件 
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html 
<!DOCTYPE html> | 
<html lang="en"> SS 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> | 
<body> 
神奇 的 HTML5 
</body’| 
</html> 


ve a ws 名 辣 司 | 
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(8) 设置 完成 之 后 ， 保 存 文件 。 选 择 File 一 Save As 命令 ， 选 择 需要 保存 的 路 径 ， 如 图 1.24 所 示 。 


编辑 HTML5 文件 


而 cp 3 
Copy file Di\Documents\untitled\jndex.htm| 
New name: | 囊 可 hm 
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图 1.24 选择 需要 保存 HTML5 文件 的 路 径 
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此 时 ， 双 了 


Tite 


C © localhost 


神奇 的 HTML5 


图 1.25 运行 HTML5 文 件 
下 面 通过 一 个 实例 进一步 了 解 HTML 文件 的 基本 结构 和 <body> 属 性 的 运用 。 


例 1.01 在 主 新 建 一 个 HTML5 文件 ， 为 <body> 标 签 添 加 样式 ， 泻 染 页 面 效 果 ， 具 体 代码 如 下 。 
( 实例 位 置 : 资源 包 \ 源 码 \01\1.01 ) 


01 <!Idoctype html> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 无 标题 文档 </title> 

06 </head> 

07 ”<!- 设 置 背景 图 片 :background， 文 字 颜 色 :text， 链 接 颜色 :link， 访 问 过 后 的 链接 颜色 : vlink， 外 边 距 : 
topmargin，topmargin --> 

08 <body background="images/bg.jpg" bgproperties="fixed" text="blue" link="red" vlink="#CCCCCC" 
topmargin="100px" leftmargin="50px"> 

09 ”长 风 破浪 会 有 时 <br/><br/> 

10” 直 挂 云 帆 济 沧海 <br/><br/> 

11 ”<a href="www.mingrisoft.com"> 点 击 链接 </a> 

12 </html> 


保存 文件 后 ， 用 鼠标 双击 该 HTMLS 文件 ， 运 行 效果 如 图 1.26 所 示 。 
i EX 一] 


D 无 标 时 文档 
CG | © file/W/F/ 零 基础 学 节食 
洪 应 用 “ 占 击 这 里 导入 书 葵 。 开始 
长 风 破 滚 会 育 时 
直 挂 云 帆 济 沧海 
点 击 链接 


图 1.26 ”<body> 标 签 的 属性 运用 实例 效果 
1.4 小 结 


本 章 主要 介绍 了 HTML 的 基本 概念 及 其 发 展 史 , 重点 介绍 了 HTML 的 基本 结构 并 详细 介绍 了 如 何 
编写 HTML 文件 的 两 种 方式 。 
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希望 读者 能 好 好 学 习 本 章 ， 有 一 个 扎实 的 基础 ， 为 以 后 的 学 习 做 一 个 好 的 铺垫 。 
1.5 实 战 
1.5.1 实战 一 : 设置 背景 颜色 
试 着 使 用 <body> 标 签 ， 为 页 面 设置 背景 颜色 为 蓝 色 。( 资源 包 \ 源 码 \0\ 实 战 \01) 


1.5.2 ”实战 二 : 设置 链接 颜色 


试 着 使 用 <body> 标 签 ， 设 置 不 同 状态 下 的 链接 的 颜色 。( 资源 包 \ 源 码 \OT\ 实 战 \02 ) 
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文本 


( 铝 ! 视频 讲解 : 小 时 14 分 钟 ) 


在 网 页 的 设计 制作 过 程 中 ， 文 本 是 最 基本 的 要 素 。 文 本 在 网 页 中 的 呈现 ， 就 如 
同音 符 在 音乐 中 的 表现 一 样 ， 优 秀 的 网 页 文本 设计 ， 带 给 人 资讯 信息 的 同时 ， 更 给 
人 以 美的 视觉 体验 ; 而 糟 料 的 网 页 文本 设计 ， 就 好 像 五 音 不 全 的 人 在 跌 吼 品 叫 ， 使 
人 欣 耳 逃走 ， 贻 医大 方 。 本 章 将 对 网 页 文本 的 知识 内 容 进 行 详细 讲解 。 

学 习 摘 要 : 

MW 标题 标签 

站 文字 

M 段落 

Wm 水平线 
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2.1 标 题 


标题 是 对 一 段 文字 内 容 的 概括 和 总 结 。 书 籍 文本 少不了 标题 ， 网 页 文本 也 不 能 没有 标 


档 的 好 坏 ， 标 题 占 有 重要 的 作用 。 在 越 来 越 追求 “视觉 美感 ”的 今天 ， 一 个 好 标题 的 设计 ， 对 用 户 的 
留存 尤为 关键 。 例 如 ， 图 2.1 和 图 2.2 显示 的 界面 效果 ， 同 样 的 标题 内 容 ， 却 使 用 了 不 同 的 页 面 标签 ， 


显示 的 效果 则 大 相 径 庭 。 


超 引 上 长短， 吉 一 十 会 这 习 此 天 卷 所。 在 秀 磷 纲 履 千 
旬 到 长 春 ， 就 一 定 会 说 到 长 春 美食 。 在 骨灰 级 吃 货 必要 9 帮 得 才 后， 不 1CR 旺 一 误 这 旗 人 的 才 态 ， 而 
是 个 天 六 /2 老 房 类 而 ， 攻 惊人 的 育 寺 理 卫衣 膏 
3 区 089 功力 机 1 


恬 尖 上 的 长 春 


A 
舌尖 上 的 长 春 
ww 一 长 在 半生 一 


图 2.1 较 好 的 标题 设计 图 2.2 糟糕 的 标题 设计 


2.1.1 标题 标签 


标题 标签 共有 6 个 ,分别 是 <hl>、<h2>、<h3>、<h4>、<h5> 和 <h6>， 每 一 个 标签 在 字体 大 小 上 都 
有 明显 的 区 别 ， 从 <h1> 标 签到 <h6> 标 签 依次 变 小 。<h1> 标 签 表示 最 大 的 标题 ，<h6> 标 签 表示 最 小 的 标 
题 。 一 般 使 用 <h1> 标 签 来 表示 网 页 中 最 上 层 的 标题 ， 而 且 有 些 浏览 器 会 默认 把 <h1> 标 签 显示 为 非常 大 


的 字体 ， 所 以 一 些 开发 者 会 使 用 <h2> 标 签 代 蔡 <h1> 标 签 来 显示 最 上 层 的 标题 。 
标题 标签 语法 如 下 。 


01 ”<h1> 文 本 内 容 </h1> 
<h2> 文 本 内 容 </h2> 
<h3> 文 本 内 容 </h3> 
<h4> 文 本 内 容 </h4> 
<h5> 文 本 内 容 </h5> 
<h6> 文 本 内 容 </h6> 


88R8R 


qq 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


p94 
NC 涪 明 
在 HIML5 中 ,标签 大 都 是 由 起 始 标签 和 结束 标签 组 成 的 。 例 如 ，<h1> 标 签 在 编码 使 用 时 ， 首 
先 编写 <h1l> 起 始 标签 和 </h1> 结 束 标签 ， 然 后 将 文本 内 容 放 入 两 个 标签 之 间 。 


例 2.01 本 实例 巧 用 <hl> 标 签 、<h4> 标 签 和 <hs> 标 签 ， 实 现 一 则 关于 程序 员 笑 话 的 对 话 内 容 。 把 
“程序 猿 的 笑话 ” 放 入 <hl> 标 签 中 ， 代 表 文 章 的 标题 ， 把 发 布 时 间 、 发 布 者 和 阅读 数 等 内 容 放 入 较 小 
字号 的 <h5> 标 签 中 ， 最 后 将 笑话 的 对 话 内 容 放 入 字号 适中 的 <h4> 标 签 中 ， 具 体 代码 如 下 。( 实例 位 置 : 
资源 包 \ 源 码 \02\2.01 ) 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<!-- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!-- 指 定 页 头 信息 -> 

07 ”<title> 程 序 猿 的 笑话 </title> 

08 </head> 

09 <body> 

10 ”<!- 表 示 文 章 标题 -> 

11 ”<h1> 程 序 猿 的 笑话 </h1> 

12 ”<!- 表 示 相 关 发 布 信息 --> 

13 ”<h5> 发 布 时 间 : 19:20 03/24 | 发 布 者 : 程序 源 | 阅读 数 : 156 次 </h5> 
14 ”<!- 表 示 对 话 内 容 -> 

15 ”<h4> 甲 : 《c++ 面向 对 象 程序 设计 》 这 本 书 怎么 比 《c 程序 设计 语言 》 厚 了 好 几 倍 ? </h4> 
16 ”<h4> 乙 : 当然 了 ， 有 “对 象 ”后 肯定 麻烦 呀 ! </h4> 

17 </body> 

18 </html> 


运行 效果 如 图 2.3 所 示 。 


[ee x 


加 cr a 和 下 Jex html 
程序 猿 的 笑话 


发 布 时 间 : 19:20 03/24 | 发 布 者 : 程序 源 | 亲 疡 教 : 156 容 
甲 ， 《cH 面向 对 象 程序 设计 》 这 本 书 怎么 比 《c 程 序 设计 语言 》 厚 了 好 几 售 ? 
乙 : 当然 了 , 有“ 对象 ”后 肯定 麻烦 蚜 ! 


2.3 ”使 用 标题 标签 写 笑话 


@ nea 
如 果 结 束 标签 漏 加 “/”， 比 如 把 </h1> 写 成 <hl>， 导 致 浏览 器 认为 是 新 标题 标签 的 开始 ， 从 而 
导致 页 面 布局 错乱 。 例 如 ， 在 下 面 代码 的 第 2 行 ， 就 将 </hl> 结 束 标签 写成 了 <h1> 开 始 标签 。 


01 ”<!-- 表 示 文章 标题 -> 
02 ”<h1> 程 序 猿 的 笑话 <h1> 
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03 ”<!- 表 示 相 关 发 布 信息 -> 

04 ”发 布 时 间 : 19:20 03/24 | 发 布 者 : 程序 源 | 阅读 数 : 156 次 

05 ”<!- 表 示 对 话 内 容 --> 

06 ”<h4> 甲 :《c++ 面 向 对 象 程序 设计 》 这 本 书 怎么 比 《c 程序 设计 语言 》 厚 了 好 几 倍 ? </h4> 
07 ”<h4> 乙 : 当然 了 ， 有 “对 象 ”后 肯定 麻烦 呀 ! </h4> 


将 会 出 现 如 图 2.4 所 示 的 错误 提示 。 


回电 如 的 半生 x em 一 
GO Iocalhost 


程序 猿 的 笑话 
发 布 时 间 : 19:20 03/24 | 发 布 者 : 程序 源 
阅读 数 : 156 次 

甲 : 《c++ 面向 对 象 程序 设计 》 这 本 书 怎么 比 《c 程 序 设计 语言 》 厚 了 好 几 倍 ? 

乙 : 当然 了 , 有 “对 象 ”后 肯定 麻烦 呀 ! 


图 2.4 结束 标签 漏 加 “/” 出 现 的 错误 


2.1.2 ”标题 的 对 齐 方式 


在 默认 情况 下 ， 标 题 文字 是 左 对 齐 的 。 而 在 网 页 制作 的 过 程 中 ， 可 以 实现 标题 文字 的 编排 设置 。 
最 常用 的 就 是 关于 对 齐 方式 的 设置 ， 可 以 为 标题 标签 添加 align 属性 进行 设置 。 

语法 格式 如 下 。 

<h1 align=" 对 齐 方式 "> 文本 内 容 </h1> 


在 上 面 的 语法 中 ，align 属性 需要 设置 在 标题 标签 的 后 面 ， 具 体 的 对 齐 方式 属性 值 如 表 2.1 所 示 。 
表 2.1 标题 文字 的 对 齐 方式 


人 6 注 意 


在 编写 代码 的 过 程 中 ， 请 注意 添加 双 引 号 。 


例 2.02 本 实例 使 用 标题 标签 中 的 align 属性 ， 实 现 图 书 商品 介绍 的 文字 展示 。 首先 使 用 <h5> 标 
题 标签 ， 将 图 书 名 称 、 图 书 作 者 、 出 版 社 等 介绍 内 容 放 入 标签 内 ， 然 后 在 每 个 标题 标签 中 ， 添 加 align 
属性 ， 属 性 值 设 为 center， 具 体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \02\2.02 ) 


01 <IDOCTYPE html> 
02 <html> 
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03 <head> 

04 ”<!- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!- 指 定 页 头 信息 一 > 

07 ”<title> 介 绍 图 书 商品 </title> 

08 </head> 

09 <body> 

10 ”<!- 显 示 商 品 图 片 -> 

11 <h1 align="center"><img src="book.jpg"/></h1> 
12 ”<!- 显 示 图 书 名称 --> 

13 ”<h5 align="center"> 书 名 : 《Java 从 入 门 到 精通 》</h5> 
14 ”<!- 显 示 图 书 作 者 -> 

15 ”<h5 align="center"> 作 者 : 明日 科技 </h5> 

16 ”<!- 显 示 出 版 社 -> 

17 ”<h5 align="center"> 出 版 社 : 清华 大 学 出 版 社 </h5> 
18 ”<!- 显 示 图 书 出 版 时 间 --> 

19 ”<h5 align="center"> 出 版 时 间 : 2017 年 1 月 </h5> 
20 ”<!- 显 示 图 书页 数 -> 

21 ”<h5 align="center"> 页 数 : 436 页 </h5> 

22 ”<!- 显 示 图 书 价格 -> 

23 ”<h5 align="center"> 价 格 : 25.00 元 </h5> 

24 </body> 

25 </html> 


$6 注意 
在 代码 11 行 ， 使 用 了 <img> 图 像 标签 。<img> 图 像 标签 可 以 将 外 部 图 片 引入 当前 网 页 内 。 
<img> 图 像 标签 的 具体 使 用 方法 请 参考 本 书 第 3 章 的 内 容 。 


运行 效果 如 图 2.5 所 示 。 
公 
站 刘 认 可 书 两 品 x 
Ca 回 。。: 


书 名 : 《Javz 从 入门 到 皇 通 》 
作者 : 明日 科技 
出 版 社 : 清华 大 字 出 版 社 
出 版 时 间 : 2017 年 1 月 
页 数 : 436 页 
价 术 :25.00 元 


图 2.5 图 书 商品 介绍 的 页 面 效果 
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22 文 字 


除了 标题 文字 外 ， 在 网 页 中 普通 的 文字 信息 也 不 可 缺少 ， 而 多 种 多 样 的 文字 装饰 效果 更 可 以 让 用 
户 眼 前 一 亮 ， 记 忆 深刻 。 在 网 页 的 编码 中 ， 可 以 直接 在 <body> 标 签 和 </body> 标 签 之 间 输 入 文字 ， 这 些 
文字 可 以 显示 在 页 面 中 ， 同 时 可 以 为 这 些 文字 添加 装饰 效果 的 标签 ， 如 斜体 、 下 画 线 等 。 下 面 将 详细 
讲解 这 些 文字 装饰 标签 。 


2.2.1 文字 的 斜体 、 下 画 线 、 删 除 线 


在 浏览 网 页 时 ， 常 常 可 以 看 到 一 些 特殊 效果 的 文字 ， 如 斜体 字 、 带 下 画 线 的 文字 和 带 删除 线 的 文 
而 这 些 文字 效果 也 可 以 通过 设置 HTML 语言 的 标签 来 实现 。 
语法 格式 如 下 。 


01 ”<em> 斜 体内 容 </em> 
02 ”<u> 带 下 画 线 的 文字 </u> 
03 ”<strike> 带 删除 线 的 文字 </strike> 


这 几 种 文字 装饰 效果 的 语法 类 似 ， 只 是 标签 不 同 。 其 中 ， 斜 体 字 也 可 以 使 用 标记 < 或 <cite> 表 示 。 

例 2.03 ”本 实例 使 用 <em> 文 字 斜 体 标签 、<u> 文 字 下 画 线 标签 和 <strike> 文 字 删 除 线 标签 ， 为 图 书 
商品 的 推荐 内 容 增添 更 多 的 文字 特效 ， 可 以 让 读者 眼前 一 亮 ， 提 高 商品 购 。 例 如 ， 如 果 商 品 打折 ， 
可 以 将 商品 原来 价格 的 文字 添加 <strike> 删 除 线 标签 ， 表 示 不 再 以 原来 价格 进行 销售 ， 上 有 具体 代码 如 下 。 
(实例 位 置 : 资源 包 \ 源 码 \02\2.03 ) 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<!-- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!-- 指 定 页 头 信息 -> 

07 ”<title> 和 斜体 、 下 画 线 、 删 除 线 </title> 

08 </head> 

09 <body> 

10 ”<!- 显 示 商 品 图 片 -> 

11 <img src="book.jpg"/> 

12 ”<!- 显 示 图 书 名 称 ， 书 名 文字 用 斜体 效果 --> 
13 ”<h3> 书 名 : <em>《JavaScript 从 入 门 到 精通 》</em></h3> 
14 ”<!- 显 示 图 书 作者 -> 

15 ”<h3> 作 者 : 明日 科技 </h3> 

16 ”<!- 显 示 出 版 社 --> 

17 ”<h3> 出 版 社 : 清华 大 学 出 版 社 </h3> 

18 ”<!- 显 示 出 版 时 间 ， 文 字 用 下 画 线 效果 --> 
19 ”<h3> 出 版 时 间 : <u>2017 年 1 月 </u></h3> 
20 ”<!- 显 示 页 数 -> 


怕 
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21 ”<h3> 页 数 : 436 页 </h3> 

22 ”<!-- 显 示 图 书 价格 ， 文 字 使 用 删除 线 效果 --> 

23 ”<h3> 原 价 :<strike>45.00</strike> 元 ”促销 价格 : 25.00 元 </h3> 
24 </body> 

25 -</html> 


运行 效果 如 图 2.6 所 示 。 


[有 
CC DD localhost:63342/ 实 例 003/index 


JavaScript 


作者 : 明日 科技 


出 版 杜 : 清华 大 学 出 版 树 <u> 标 签 ， 文 字 下 夯 线 效果 
出 版 时 间 :[2019 年 1 月 | 


页 数 : 436 责 <strike> 标 签 , 文字 删除 线 效果 ] 


2.6 活用 文字 装饰 的 页 面 效 果 


2.2.2 文字 的 上 标 与 下 标 


除了 设置 不 同 的 文字 装饰 效果 外 ， 有 时 还 需要 设置 一 种 特殊 的 文字 装饰 效果 ， 即 上 标 和 下 标 。 上 
标 或 下 标 经 常会 在 数学 公式 或 方程 式 中 出 现 。 

语法 格式 如 下 。 

01 ”<sup> 上 标 标签 内 容 </sup> 

02 ”<sub> 下 标 标签 内 容 </sub> 


在 上 面 的 语法 中 ， 上 标 标签 和 下 标 标签 的 使 用 方法 基本 相同 ， 只 需要 将 文字 放 在 标记 中 间 即 可 。 

例 2.04 ”本 实例 使 用 <sup> 上 标 标签 和 <sub> 下 标 标 签 ， 实 现 数学 方程 式 的 网 页 展示 。 首 先 将 数学 
方程 式 中 数字 符号 全 部 输入 ， 比 如 输入 方程 式 “X3+9X2-3=0”， 然 后 将 需要 置 上 或 置 下 的 数字 符号 放 
入 上 标 或 下 标 标 签 中 ， 有 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \02\2.04 ) 


01 <!IDOCTYPE html> 
02 <html> 


03 <head> 

04 ”<!-- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!- 指 定 页 头 信息 一 > 

07 ”<title> 上 标 和 下 标 </title> 

08 </head> 

09 <body> 

10 ”<!- 表 示 文 章 标题 -> 

11 <h1 align="center"> 上 标 和 下 标 标签 </h1> 

12 ”<h3 align="center"> 在 数字 计算 中 :</h3> 

13 ”<!- 使 用 上 标 标签 ， 将 文字 置 上 --> 

14 <h3 align="center"> 上 标 : X<sup>3</sup>+9X<sup>2</sup>-3=0</h3> 
15 ”<!- 使 用 下 标 标签 ， 将 文字 置 下 --> 

16 ”<h3 align="center"> 下 标 : 3X<sub>1</sub>+2X<sub>2</sub>=10</h3> 


17 </body> 
18 </html> 
运行 效果 如 图 2.7 所 示 。 
i wT .cE 
加 上 下 标 x 
@C | 曲 localhost63342/ 实 例 004/indexhtml 安 | 婴 三 


| 上 标 和 下 标 标签 
| 在 数字 计算 中 : 

上 标 标签 
| 下 标 : 3X1+2T10 


| 


2.7 上 标 下 标 标签 的 界面 效果 


2.2.3 ”特殊 文字 符号 


在 网 页 的 制作 过 程 中 ， 特 殊 的 符号 (如 引号 、 空 格 等 ) 也 需要 使 用 代码 进行 控制 。 一 般 情况 下 ， 
特殊 符号 的 代码 由 前 缀 “人 &” 字符 名 称 和 后 缀 分 号 “;” 组 成 。 使 用 方法 与 空格 符号 类 似 ， 有 具体 如 
表 2.2 所 示 。 


表 2.2 特殊 符号 的 表示 
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例 2.05 本 实例 巧 用 特殊 的 文字 符号 ， 绘 制 出 一 个 可 爱 小 狗 的 字符 画 ， 用 来 表示 未 找到 的 内 容 ， 
或 者 是 错误 的 页 面 内 容 。 在 真正 的 网 页 设计 中 ， 需 要 设计 出 应 对 网 页 出 错 或 是 未 找到 网 页 的 解决 方案 


页 面 ， 俗 称 “404 页 面 ”。 利 用 字符 画 的 趣味 表现 好 


法 ， 可 以 进一步 提高 用 户 体验 ， 有 具体 代 码 如 下 。( 实 


例 位 置 : 资源 包 \ 源 码 \02\2.05 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
人 
4 
13 
14 
15 
16 
17 
18 
19 


<!IDOCTYPE html> 

<html> 

<head> 

<!- 指 定 页 面 编码 格式 --> 
<meta charset="UTF-8"> 
<!- 指 定 页 头 信息 --> 
<title> 特 殊 文字 符号 </title> 
</head> 


<body> 
<!- 表 示 文 章 标题 -> 


<!- 绘 制 可 爱 小 狗 的 字符 号 -> 
<pre align="center"> 


一 (8)(88) 一 肌 
'@ 


pm 
mm 


1, hi\\ 
外 你 好 ! \\ 


</pre> 

</body> 

</html> 

效果 如 图 2.8 所 示 。 


运行 


<h1 align="center"> 汪 汪 ! 你 想 找 的 页 面 让 我 吃 唆 ! </h1> 


因 Sa 文 了 有 全 
| 名 


localhosti63342/ 详 


ind 


图 2.8 小 狗 字 符 画 的 页 面 效 果 
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2.3 段 落 


一 块 块 砖 瓦 组 合 就 形成 了 高 楼 大 厦 ， 一 行 行文 字 组 合 就 形成 了 段落 篇 章 。 在 实际 的 文本 编码 中 ， 
输入 完 一 段 文 字 后 , 按 Enter 键 就 生成 了 一 个 段落 , 但 是 在 HIML5 中 需要 通过 标签 来 实现 段落 的 效果 ， 
下 面具 体 介绍 和 段落 相关 的 一 些 标签 。 


2.3.1 段落 标签 


在 HIML5 中 ， 段 落 效果 是 通过 <p> 标 签 来 实现 的 。<p> 标 签 会 自动 在 其 前 后 创建 一 些 空白 ， 浏 览 
器 则 会 自动 添加 这 些 空间 。 

语法 格式 如 下 。 

01 ”<p> 段 落 文字 </p> 


其 中 ， 可 以 使 用 成 对 的 <p> 标 签 来 包含 段落 ， 也 可 以 使 用 单独 的 <p> 标 签 来 划分 段落 。 

例 2.06 ”本 实例 使 用 <p> 段 落 标签 ， 实 现 明日 学 院 的 内 容 介绍 。 首 先 结合 特殊 文字 符号 将 “明日 
学 院 ， 专 注 编程 教育 十 八 年” 放 入 <p> 段 落 标 签 中 ， 然 后 将 明日 学 院 的 具体 介绍 内 容 分 别 放 在 <p> 标 签 
中 ， 最 后 也 结合 特殊 符号 将 明日 学 院 的 网 址 放 入 底部 的 段落 标签 中 ， 有 具体 代码 如 下 。( 实例 位 置 : 资源 
包 \ 源 码 \02\2.06 ) 


01 <!IDOCTYPE html> 
02 <html> 
03 <head> 
04 ”<!- 指 定 页 面 编码 格式 --> 
05 <meta charset="UTF-8"> 
06 ”<!-- 指 定 页 头 信息 -> 
07 ”<title> 段 落 标签 </title> 
08 </head> 
09 <body> 
10 ”<!- 使 用 段落 标签 ， 进 行 创意 性 排版 -> 
11 <p> /一 一 一 一 一 “明日 学 院 ， 专 注 编程 教育 十 八 年 睹 一 一 一 一 一 一 </p> 
12 <p>| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 阴 日 学 院 ， 
是 吉林 省 明日 科技 有 限 公 司 倾 力 打造 的 在 线 实 用 &nbsp;&nbsp; | </p> 
13 ”<p> | &nbsp;&nbsp; 技 能 学 习 平台 ， 该 平台 于 2016 年 正式 上 线 ， 主 要 为 学 习 者 提供 海 &nbsp; | </p> 
14 <p> | &nbsp;&nbsp; 量 、 优 质 的 课程 ， 课 程 结构 严谨 ， 用 户 可 以 根据 自身 的 学 习 程度 ,&nbsp; | </p> 
15 ”<p> | &nbsp;&nbsp; 自 主 安排 学 习 进度 。 我 们 的 宗旨 是 ， 为 编程 学 习 者 提供 一 站 式 服 &nbsp; | </p> 
16 ”<p> | &nbsp;&nbsp; 务 ， 培 养 用 户 的 编程 思维 ， 小 白手 册 ， 视 频 教程 ， 一 学 就 会 。&nbsp;&nbsp; | </p> 
17 -<p> “一 网 址 :http:/www.mingrisoft.com 上 <p> 
18 </body> 
19 </html> 


运行 效果 如 图 2.9 所 示 。 
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f -in [eee | 
[33 x 
C | © localhost63342/ 详 网 006/indexht rar 国 ; 


一 一 1 明日 学院 ,专注 嵩 得 教育 二/ 作 年 | 一 一 一 一 一 
1 吉林 省 明日 科技 有 限 公司 倾 力 打 造 的 在 线 实用 1 
2016 年 正式 上 线 ,主要 为 学 习 者 提供 海 | 
结交 严 说 ， 用 户 可 以 根据 自身 的 学 习 程 斋 1 
中 自主 安排 学 习 进 度 。 我 们 的 宗旨 是 ， 为 编程 学 习 者 提供 一 站 式 服 1 
1 务 , 培 并 用 户 的 编程 轩 维 , 小 白手 册 ， 视 上 教程 ， 一 学 就 会 。 1 
一 网 thttp.//wwwmingrisottcom 一 -一 一 


图 2.9 使 用 段落 标签 的 界面 效果 
2.3.2 ”段落 的 换行 标签 


段落 与 段落 之 间 是 隔行 换行 的 ， 这 样 会 导致 文字 的 行 间距 过 大 ， 这 时 可 以 使 用 换行 标签 来 完成 广 
字 的 紧凑 换行 显示 。 
语法 格式 如 下 。 


01 <p> 
02 ”一 段 文字 <br/> 一 段 文字 
03 </p> 


其 中 ，<br 放 标签 代表 换行 ， 如 果 要 多 次 换行 ， 可 以 连续 使 用 多 个 换行 标签 。 

例 2.07 本 实例 巧 用 <br/> 换 行 标签 ， 实 现 唐诗 《 望 庐山 瀑布 》 中 诗句 的 页 面 布局 。 通 常 可 以 使 用 
多 个 <p> 段 落 标 签 达到 换行 的 目的 ， 也 同样 可 以 使 用 <br/> 换 行 标签 ， 在 <p> 段 落 标 签 内 部 进行 换行 ， 具 
体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \02\2.07 ) 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 <!- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 <!- 指 定 页 头 信息 --> 

07 <title> 段 落 的 换行 标签 </title> 

08 </head> 

09 <body> 

10 ”<!- 使 用 段落 标签 书写 古诗 --> 

11 <p align="center"> 

12 <!-- 使 用 2 个 换行 标签 --> 

13 《 望 庐山 瀑布 》&nbsp;&nbsp;&nbsp;&nbsp; 李 白 <br/><br/> 
Lae <!- 使 用 1 个 换行 标签 -> 

15 日 照 香 炉 生 紫 烟 ， 遥 看 瀑布 挂 前 川 。<br> 
16 < 上 -使 用 1 个 换行 标签 -> 

本 飞 流 直 下 三 千 尺 ， 疑 是 银河 落 九 天 。<br/> 
18 </p> 


19 </body> 
20 </html> 


运行 效果 如 图 2.10 所 示 。 


[3 
| > © | © localhost:63342/ 实 俩 007/index.htr 
《 扭 庐山 瀑布 》” 地 白 


日 照 香 炉 生 些 烟 ， 腺 看 瀑布 挂 前 川 。 
飞 流 直下 三 千 尺 ， 疑 是 银河 落 九天 。 


图 2.10 段落 换行 标签 的 页 面 效 果 


ns 
<br/> 换 行 标签 语法 比较 特殊 。 它 并 不 是 由 开始 标签 和 结束 标签 组 成 ， 所 以 初学 者 经 常会 写 错 。 
例如 ， 在 下 面 代码 04 行 ，<br/> 换 行 标签 就 写成 了 <b/r> 的 错误 写法 。 


01 ”<!-- 使 用 段落 标签 书写 古诗 一 > 

02 <palign="center"> 

03 ”<!-- 使 用 2 个 换行 标签 -> 

04 ”《 望 庐山 瀑布 》&nbsp;&nbsp;&nbsp;&nbsp; 李 白 <b/r/><b/r> 
05 ”<!- 使 用 1 个 换行 标签 -> 

06 ”日 照 香 炉 生 紫 烟 ， 遥 看 瀑布 挂 前 川 。<br/> 

07 ”<!-- 使 用 1 个 换行 标签 -> 

08 ” 飞 流 直下 三 千 尺 ， 疑 是 银河 落 九 天 。<br/> 

09 </p> 


将 会 出 现 如 图 2.11 所 示 的 错误 提示 。 


Vs ome 


C | © localhost. 


《 望 庐山 瀑布 》 地 白 i , 逐 看 瀑布 挂 前 
1 
飞 流 直下 三 干 尺 ， 疑 是 银河 落 九天 。 


图 2.11 结束 标签 漏 加 “/” 出 现 的 错误 a 


2.3.3 ”段落 的 原 格式 标签 


在 网 页 制作 中 ， 一 般 是 通过 各 种 标签 对 文字 进行 排版 的 。 但 在 实际 应 用 中 ， 往 往 需 要 一 些 特殊 的 
排版 效果 ， 这 样 使 用 标签 控制 非常 麻烦 。 解 决 的 方法 就 是 使 用 原 格式 标签 进行 排版 ， 如 空格 、 制 表 符 
等 。 原 格式 标签 <pre> 就 可 以 解决 这 个 问题 。 
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语法 格式 如 下 。 


01 <pre> 
02 ”文本 内 容 
03 </pre> 


例 2.08 ”本 实例 利用 <pre> 原 始 排版 标签 ， 实 现 一 个 “元 旦 快乐 ”的 字符 画 。<pre> 原 始 排版 标签 ， 
保留 代码 中 的 原始 文字 格式 ， 利 用 此 特性 ， 可 以 通过 键盘 上 的 特殊 符号 绘制 出 多 种 多 样 的 字符 画 效果 。 
本 实例 中 使 用 键盘 上 的 o 键 ， 绘 制 了 一 个 “元 旦 快乐 ”的 字符 画 ， 可 爱 生 动 ， 表 现 力 强 ， 有 具体 代码 如 
下 。( 实例 位 置 : 资源 包 \ 源 码 \02\2.08 ) 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<!- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!-- 指 定 页 头 信息 一 > 

07 ”<title> 原 始 排 版 标签 </title> 
08 </head> 

09 <body> 

10 ”<h1> 原 始 排版 标签 --pre</h1> 
11 ”<!- 使 用 原始 排版 标签 ， 输 入 文字 字符 画 --> 


12 <pre> 

13 00000000 000000000 O O 00000000 
14 000000000000 0 0 0 00ooooo DO 

15 0 0 000000000 oo 0 0 0000000000 
16 0 0 0 O 000 000000000 o 

和 0 0 000000000 oo 0 00 
18 0 0 0 0 oo0 0 oo 0 
19 0 0000000 0000000000000 0 o 0 A 
20 </pre> 

21 </body> 

22 </html> 


运行 效果 如 图 2.12 所 示 。 


[rE x 民 ~ 
已 D localhost:63342/ 安 例 008/index.html 了 | 和 三 


图 2.12 原始 排版 标签 的 页 面 效果 


24 水 平 线 


水 平 线 用 于 段落 与 段落 之 间 的 分 隔 ， 使 文档 结构 清晰 明白 ， 文 字 的 编排 更 整齐 。 水 平 线 自 身 具 有 
很 多 属性 ， 如 宽度 、 高 度 、 颜 色 、 排 列 对 齐 等 。 在 HTML5 中 经 常会 用 到 水 平 线 ， 合 理 使 用 水 平 线 可 
以 获取 非常 好 的 页 面 装饰 效果 。 一 篇 内 容 繁杂 的 文档 ， 如 果 合 理 放置 几 条 水 平 线 ， 就 会 变 得 层次 分 明 ， 
便于 阅读 。 


2.4.1 水 平 线 标签 


在 HIML5 中 使 用 <hr> 标 签 来 创建 一 条 水 平 线 。 水 平 线 可 以 在 视觉 上 将 文档 分 割 成 各 个 部 分 。 在 
网 页 中 输入 一 个 <hr> 标 签 ， 就 添加 了 一 条 默认 样式 的 水 平 线 。 

语法 格式 如 下 。 

01 <hr> 


例 2.09 本 实例 使 用 <hr> 水 平 线 标签 ， 实 现 一 个 果酱 制作 原料 的 列表 清单 。<hr> 水 平 线 标签 ， 经 
常 在 段落 之 间 进 行 提醒 分 组 的 作用 来 使 用 ， 同 时 ， 也 可 以 使 用 <hr> 水 平 线 标签 制作 一 些 简 单 的 列表 清 
单 ， 如 餐厅 菜单 、 食 品 原料 等 ， 具 体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \02\2.09 ) 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<!- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!-- 指 定 页 头 信息 一 > 

07 ”<title> 水 平 线 标签 </title> 

08 </head> 

09 <body> 

10 ”<!- 表 示 文 章 主题 -> 

11 ”<h1 align="center"> 果 次 制作 的 材料 准备 </h1> 

12 ”<!- 使 用 水 平 线 来 画 表格 --> 

13 <hr> 

14 ”<p align="center"> 苹 果 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 两 颗 </p> 
15 ”<!-- 使 用 水 平 线 来 画 表 格 --> 

16 <hr/> 

17 ”<p align="center"> 方 形 酥 皮 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 四 片 </p> 

18 ”<!-- 使 用 水 平 线 来 画 表 格 --> 

19 <hr/> 

20 ”<p align="center"> 柠 榜 汁 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 一 匙 </p> 
21 ”<!-- 使 用 水 平 线 来 画 表 格 --> 

22 <hr/> 

23 ”<p align="center"> 砂 糖 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 一 匙 </p> 
24 ”<!-- 使 用 水 平 线 来 画 表 格 --> 
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25 <hr/> 

26 ”<p align="center"> 肉 桂 粉 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 适 量 </p> 
27 ”<!- 使 用 水 平 线 来 画 表格 --> 

28 <hr/> 

29 </body> 

30 </html> 


运行 效果 如 图 2.13 所 示 。 


国 水 法 标 竺 了 


CG | @ localhost63342/ 安 例 009/indexhtml 色 女 | 芥 回 : 
果 效 制作 的 材料 准备 

苹果 两 颗 

方形 酥 皮 片 

柠 样 汗 一 匙 

砂糖 一 匙 

肉桂 粉 适量 


2.13 ”使 用 水 平 线 标签 的 页 面 效 果 


2.4.2 水平线 标签 的 宽度 


默认 情况 下 ， 在 网 页 中 添加 的 水 平 线 是 100% 的 宽度 ， 而 在 实际 创建 网 页 时 ， 可 以 对 水 平 线 的 宽度 
进行 设置 。 

语法 格式 如 下 。 

01 ”<hr width=" 水 平 线 宽度 " > 

在 上 面 的 语法 中 ， 水 平 线 的 宽度 值 可 以 是 确定 的 像素 值 ， 也 是 可 以 窗口 宽度 值 的 百分比 。 

例 2.10 本 实例 利用 <hr> 水 平 线 标签 中 的 宽度 属性 ， 实 现 了 一 则 微 故 事 的 页 面 文字 装饰 效果 。 首 


先 使 用 <p> 段 落 标签 ， 将 “故事 是 这 样 开始 的 : ”文本 内 容 放 入 。 然 后 在 <p> 标 签 代码 上 方 ， 添 加 <hr> 
水 平 线 标签 , 并 且 添加 width 宽度 属性 , 属性 值 为 120, 具体 代码 如 下 。( 实例 位 置 :资源 包 \ 源 码 \02\2.10 ) 


01 <!IDOCTYPE html> 

02 <htmllang="en"> 

03 <head> 

04 ”<!-- 指 定 页 面 编码 格式 --> 
05 <meta charset="UTF-8"> 
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06 ”<!- 指 定 页 头 信息 一 > 

07 ”<title> 水 平 线 的 宽度 、 高 度 、 颜 色 </title> 
08 </head> 

09 <body> 

10 ”<!- 设 置 水 平 线 的 宽度 ， 居 左 一 > 

11 <hr width="120" align="left"> 

12 ”<p> 故 事 是 这 样 开始 的 :</p> 

13 ”<!- 使 用 段落 标签 ， 输 入 故事 内 容 --> 
14 <palign="center"> 

15 当初 看 《 简 爱 》 的 时 候 ， 哭 得 稀 里 哗 啦 
16 </p> 

17 <p align="center"> 

18 泪 点 在 哪里 呢 ? 

19 </p> 

20 <palign="center"> 

21 我 喜欢 悲伤 的 故事 

22 </p> 

23 <palign="center"> 

24 不 喜欢 悲伤 的 结局 

25 </p> 

26 ”<!- 设 置 水 平 线 的 宽度 ， 居 右 一 > 

27 <hrwidth="120" align="right"> 

28 <p align="right"> 故 事 就 这 样 结束 的 <p> 
29 </body> 

30 </html> 


运行 效果 如 图 2.14 所 示 。 


i [EI > 
园 水 干线 的 宽度 .天 度 .两 x 
© localhost:63342/ 实 例 010/index.html Ee 
故事 是 这 样 开始 的 : 
当初 看 < 简 爱 》 的 时 候 ， 闪 得 稳 里 只 啦 | 
泪 点 在 哪里 呢 ? 
我 喜欢 莫 伤 的 故事 
不 喜欢 韭 伤 的 结局 
故事 就 这 样 结束 的 
L 有 


图 2.14 利用 <hr> 标 签 装饰 文字 
2.5 小 结 


本 章 介绍 了 网 页 文本 中 标题 (标题 标签 和 标题 的 对 齐 方 式 ) 的 使 用 ， 文 字 (文字 的 斜体 、 下 画 线 、 
删除 线 、 文 字 的 上 标 与 下 标 和 特殊 文字 符号 ) 的 调整 ， 段 落 〈 段 落 标 签 、 段 落 的 换行 标签 和 段落 的 原 
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格式 标签 ) 的 用 法 ， 水 平 线 〈 水 平 线 标签 和 水 平 线 标签 的 宽度 ) 的 巧 用 。 通 过 本 章 的 学 习 ， 读 者 应 该 
学 会 如 何 使 用 各 种 文本 标签 ， 灵 活 地 进行 网 页 文本 的 布局 和 装饰 。 


2.6 实 战 


2.6.1 实战 一 : 实现 一 则 天 气 预 报 

请 试 着 利用 <h1>、<h4> 和 <h5> 标 签 , 实现 一 则 “天 气 预 报 ”的 消息 发 布 。( 资源 包 \ 源 码 \02\ 实 战 \01 ) 
2.6.2 ”实战 二 : 实现 一 则 唐诗 

试 着 利用 align 属性 中 的 “居中 ”排版 方式 ， 完 成 一 首 唐 诗 的 页 面 效 果 。( 资源 包 \ 源 码 \02\ 实 战 \02 ) 
2.6.3 ”实战 三 : 实现 商品 打折 清单 

试 着 使 用 <strike> 标 签 ， 完 成 一 个 “打折 商品 清单 ”的 页 面 效 果 。( 资源 包 \ 源 码 \02\ 实 战 \03 ) 
2.6.4 ”实战 四 : 实现 一 个 人 物 字符 画 


试 着 使 用 特殊 文字 符号 ， 发 挥 想 象 创意 ， 完 成 一 个 人 物 的 字符 画 。( 资源 包 \ 源 码 \02\ 实 战 \04 ) 


第 章 
图 像 和 超 链接 


( 熏 视 频 讲 解 : 39 分 钟 ) 


万 维 网 (World Wide Web) 与 其 他 网 络 类 型 (如 FTP) 最 大 的 不 同 就 在 于 ， 
它 在 网 页 上 可 呈现 丰富 的 色彩 及 图 像 。 用 户 可 以 在 网 页 中 放 入 自己 的 照片 ;也 可 以 
放 入 公司 的 商标 ; 还 可 以 把 图 像 作 为 一 个 按钮 来 链接 到 另 一 个 网 页 ， 这 就 让 网 页 变 
得 丰富 多 彩 了 。 

学 习 摘 要 : 

WI， 图像 的 基本 格式 

”设置 图 像 属性 

”链接 标签 

MW ”图像 的 起 链接 
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3.1 添加 图 像 


3.1.1 图 像 的 基本 格式 


我 们 今天 所 看 到 的 网 页 ， 越 来 越 丰富 多 彩 ， 是 因为 添加 了 各 种 各 样 的 图 像 ， 对 网 页 进行 了 美化 。 
当前 万 维 网 上 流行 的 图 像 格式 以 GIF 及 JPEG 为 主 ， 另 外 还 有 一 种 PNG 格式 的 图 像 文件 ， 也 越 来 越 多 
地 被 应 用 于 网 络 中 。 以 下 分 别 对 这 3 种 图 像 格式 的 特点 进行 介绍 。 

1. GIF 格式 

GIF 格式 采用 LZW 压缩 ， 是 以 压缩 相同 颜色 的 色 块 来 减少 图 像 大 小 的 。 由 于 LZW 压缩 不 会 造成 
任何 品质 上 的 损失 ， 而 且 压缩 效率 高 ， 再 加 上 GIF 在 各 种 平台 上 都 可 使 用 ， 所 以 很 适合 在 互联 网 上 使 
用 ,但 GIF 只 能 处 理 256 色 。 

GIF 格式 适合 于 商标 、 新 闻 式 的 标题 或 其 他 小 于 256 色 的 图 像 。 想 要 将 图 像 以 GIF 的 格式 存储 ， 
可 参考 下 面 范例 的 方法 。 

LZW 压缩 是 一 种 能 将 数据 中 重复 的 字符 串 加 以 编码 制作 成 数据 流 的 一 种 压缩 法 ， 通 常 应 用 于 GIF 
图 像 文件 的 格式 。 

2. JPEG 格式 

对 于 照片 之 类 全 彩 的 图 像 ， 通 常 都 以 JPEG 格式 来 进行 压缩 ， 也 可 以 说 ，JPEG 格式 通常 用 来 保存 
超过 256 色 的 图 像 格 式 。 JPEG 的 压缩 过 程 会 造成 一 些 图 像 数据 的 损失 ， 所 造成 的 “损失 ”是 剔除 了 一 
些 视 觉 上 不 容易 觉察 的 部 分 。 如 果 剔 除 适 当 ， 视 觉 上 不 但 能 够 接受 ， 而 且 图 像 的 压缩 效率 也 会 提高 ， 
使 图 像 文 件 变 小 ， 反 之 ， 剔 除 太 多 图 像 数 据 ， 则 会 造成 图 像 过度 失 真 。 

3. PNG 格式 

PNG 图 像 格式 是 一 种 非 破坏 性 的 网 页 图 像 文件 格式 ， 它 提供 了 将 图 像 文 件 以 最 小 的 方式 压缩 却 又 
不 造成 图 像 失真 的 技术 。 它 不 仅 具备 了 GIF 图 像 格式 的 大 部 分 优点 ， 而 且 还 支持 48-bit 的 色彩 ， 更 快 
的 交错 显示 ， 跨 平台 的 图 像 亮度 控制 ， 更 多 层 的 透明 度 设置 。 


3.1.2 添加 图 像 


有 了 图 像 文 件 之 后 ， 就 可 以 使 用 img 标记 将 图 像 插入 网 页 中 ， 从 而 达到 美化 页 面 的 效果 ， 其 语法 
格式 如 下 。 

<img src=" 图 像 文 件 的 地 址 "> 

src 用 来 设置 图 像 文件 所 在 的 地 址 ， 这 一 路 径 可 以 是 相对 地 址 ， 也 可 以 是 绝对 地 址 。 

绝对 地 址 就 是 主页 上 的 文件 或 目录 在 硬盘 上 的 真正 路 径 ， 如 路 径 “D:mrs\5-1jpg”。 使 用 绝对 路 径 
就 需要 重新 设置 所 有 的 相关 链接 。 例 如 ， 在 本 地 测试 网 页 时 链接 全 部 可 用 ， 但 是 到 了 网 上 就 不 可 用 。 
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相对 地 址 是 最 适合 网 站 的 内 部 文件 引用 的 。 只 要 是 属于 同一 网 站 之 下 的 ， 即 使 不 在 同一 个 目录 下 ， 
相对 地 址 也 非常 适用 。 只 要 是 处 于 站 点 文件 夹 之 内 ， 相 对 地 址 可 以 自由 地 在 文件 之 间 构 建 链接 。 这 种 
地 址 形式 利用 的 是 构建 链接 的 两 个 文件 之 间 的 相对 关系 ， 不 受 站 点 文件 夹 所 处 服务 器 位 置 的 影响 。 因 
此 这 种 书写 形式 省 略 了 绝对 地 址 中 的 相同 部 分 。 这 样 做 的 优点 是 : 站 点 文件 夹 所 在 服务 器 地 址 发 生 改 
变 时 ， 文 件 夹 的 所 有 内 部 文件 地 址 都 不 会 出 问题 。 

相对 地 址 的 使 用 方法 如 下 。 

回 ”如 果 要 引用 的 文件 位 于 该 文件 的 同一 目录 下 ， 则 只 需 输 入 要 链接 文档 的 名 称 ， 如 5-2.jpg。 

回 ”如 果 要 引用 的 文件 位 于 该 文件 的 下 一 级 目录 中 ， 只 需 先 输入 目录 名 ， 然 后 加 “/”， 再 输入 文 
件 名 ， 如 mr5-2.jpg。 

回 ”如 果 要 引用 的 文件 位 于 该 文件 的 上 一 级 目录 中 ， 则 先 输入 “../”， 再 输入 目录 名 和 文件 名 ， 

如 ../mr/5-2.jpg。 

例 3.01 在 HTML 页 面 中 ， 分 别 通过 <h2> 标 签 添加 网 页 的 标题 ， 然 后 分 别 使 用 <p> 标 签 和 <img> 
标签 添加 文本 和 图 片 ， 实 现 五 子 棋 的 游戏 简介 ， 有 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \03\3.01 ) 

01 <body> 

02 ”<!- 插 入 五 子 棋 游戏 的 文字 简介 --> 

03 ”<h2 align="center"> 五 子 棋 游 戏 简 介 </h2> 

04 ”<p>&nbsp;&nbsp;《 五 子 棋 》 是 由 明日 科技 研发 的 一 款 老少 皆 宜 的 休闲 类 棋牌 游戏 。 其 起 源 于 中 国 古 代 传 统 的 

Ee a 玩 起 来 妙趣 横生 ， 引 人 入 胜 ， 不 仅 能 增强 思维 能 力 ， 而 且 可 以 富 含 哲理 ， 有 助 于 修身 养性 。</p> 

06 ”<p>&nbspi&nbsp; 玩 游戏 时 ， 既 可 以 随机 匹配 玩家 ， 也 可 以 与 朋友 对 弈 ， 或 者 无 聊 时 选择 人 机 对 弈 。 画 面 

简单 大 方 。 游 戏 中 ， 最 先 在 棋盘 的 横向 、 纵 向 或 斜 向 形成 连续 的 相同 的 五 个 棋子 的 一 方 为 有 性 。</p> 
07 “<!- 插 入 五 子 棋 的 游戏 图 片 ， 并 且 设 置 水 平 间距 为 180 像素 --> 
08 <img src="img/wuzi.png" alt="" hspace="180"> 


09 </body> 
编辑 完 代码 后 ， 在 浏览 器 中 运行 代码 ， 显 示 页 面 效 果 如 图 3.1 所 示 。 
ee ee 
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五 子 根 游戏 简介 


《五 子 杠 ) 吕 由 明日 科技 研 发 的 一 于 志 少 区 二 的 体 尖 棋牌 基 允 。 Mt 
玩 起 来 钞 起 横生 ， 引 人 入 姓 ， 不 仅 北 几 台电 淮 骨 力 ， 而且 可 以 融会 委 理 ， 有 辽 于 候 身 基 
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3.1 插入 图 片 的 效果 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


3.2 设置 图 像 属 性 


3.2.1 图 像 大 小 与 边框 


在 网 页 中 直接 插入 图 片 时 ， 图 像 的 大 小 和 原 图 是 相同 的 ， 而 在 实际 应 用 时 可 以 通过 各 种 图 像 属性 
的 设置 调整 图 像 的 大 小 、 分 辩 率 等 内 容 。 


1. 调整 图 像 大 小 
在 <img> 标 签 中 , 通过 height 属性 和 width 属性 可 以 设置 图 片 显示 的 高 度 和 宽度 , 其 语法 格式 如 下 。 
01 ”<img src=" 图 像 文件 的 地 址 " height="" width=""> 
回 ”height， 用 于 设置 图 像 的 高 度 ， 单 位 是 像素 ， 可 以 省 略 。 
回 width: 用 于 设置 图 像 的 宽度 ， 单 位 是 像素 ， 可 以 省 略 。 
oY 
NC 培 曙 
设置 图 片 大 小 时 ， 如 果 只 设置 了 高 度 或 宽度 ， 则 另 一 个 参数 会 按照 相同 比例 进行 调整 ; 如 果 同 
时 设置 两 个 属性 ， 且 缩放 比例 不 同 的 情况 下 ， 图 像 很 可 能 会 变形 。 


2. 设置 图 像 边框 一 一 border 


在 默认 情况 下 ， 页 面 中 插入 的 图 像 是 没有 边框 的 ， 但 是 可 以 通过 border 属性 为 图 像 添 加 边框 ， 其 
语法 格式 如 下 。 


01 ”<img src=" 图 像 文 件 的 地 址 " border=""> 


其 中 ，border 用 于 设置 图 片 边框 的 大 小 ， 单 位 是 像素 。 
例 3.02 在 商品 详情 页 面 中 添加 两 张 手机 图 片 ， 其 中 ， 一 张 设置 宽 高 为 350 像素 ， 另 一 张 设置 宽 
高 为 50 像素， 并 为 其 添加 边框 ， 其 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \03\3.02 ) 


01 <body> 

02 <divclass="mr-content"> 

03 <!- 添 加 第 一 张 图 片 ， 并 且 设置 图 片 没有 边框 -> 

04 <img src="images/img.jpg" alt="" height="350" width="350" border="0"><br/> 
05 <!- 添 加 第 二 张 图 片 ， 并 且 设 置 图 片 边框 大 小 为 2 像素 --> 

06 <img src="images/img.jpg" alt="" height="50" width="50" border="2"> 

07 </div> 

08 </body> 


编辑 完 代码 后 ， 在 浏览 器 中 运行 代码 ， 显 示 页 面 效果 如 图 3.2 所 示 。 
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图 3.2 设置 图 像 的 边框 ? 


DV 
在 实例 3.02 中 ， 运 用 了 <div> 标 签 ，<div> 标 签 是 HTML 中 一 种 常用 的 块 级 元 素 ， 使 用 它 可 以 
在 CSS3 中 方便 地 设置 其 宽 高 以 及 内 外 边 距 等 样式 。 另 外 ， 本 实例 还 运用 CSS3 给 页 面 添 加 背景 图 
片 、 设 置 页 面 内 容 居 中 ， 关 于 CSS3 的 具体 知识 在 第 4 章 会 有 所 讲述 ， 本 实例 的 具体 CSS3 代码 请 
参照 资源 包 中 源码 。 


3.2.2 图 像 间距 与 对 齐 方式 


HTMLS 不 仅 有 用 于 添加 图 像 的 标签 ， 而 且 还 可 以 调整 图 像 在 页 面 中 的 间距 和 对 齐 方式 ， 从 而 改变 
图 像 的 位 置 。 

1. 调整 图 像 间距 

如 果 不 使 用 <br> 标 签 或 者 <p> 标 签 进行 换行 显示 ， 那 么 添加 的 图 像 会 紧 跟 在 文字 之 后 。 但是, 通过 
hspace 和 vspace 属性 可 以 调整 图 像 与 文字 之 间 的 距离 ， 使 文字 和 图 像 的 排版 不 那么 拥挤 ， 看 上 去 会 更 
加 协调 ， 其 语法 格式 如 下 。 

01 ”<img src=" 图 像 文 件 的 地 址 "hspace="" vspace=""> 

回 hspace: 用 于 设置 图 像 的 水 平 间 距 ， 单 位 是 像素 ， 可 以 省 略 。 

回 ”vspace: 用 于 设置 图 像 的 垂直 间距 ， 单 位 是 像素 ， 可 以 省 略 。 

2. 设置 图 像 相 对 于 文字 基准 线 的 对 齐 方式 

图 像 和 文字 之 间 的 排列 通过 align 参数 来 调整 。 其 对 齐 方式 可 分 为 两 类 ， 即 绝对 对 齐 和 相对 文字 对 
齐 方式 ， 绝 对 对 齐 方式 包括 左 对 齐 、 右 对 齐 和 居中 对 齐 3 种 ， 而 相对 文字 对 齐 方 式 则 是 指 图 像 与 一 行 
文字 的 相对 位 置 ， 其 语法 格式 如 下 。 

01 ”<img src=" 图 像 文件 的 地 址 " align=" 相 对 文字 的 对 齐 方式 "> 


书 中 手机 图 片 仅 作 为 案例 演示 使 用 ， 没 有 考虑 具体 手机 名 称 ， 后 文 不 再 著述 。 
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在 该 语法 中 ，align 的 取 值 如 表 3.1 所 示 。 
表 3.1 图 像 相对 文字 的 对 齐 方式 


align 取 值 表示 的 含义 

top 把 图 像 的 项 部 和 同行 的 最 高 部 分 对 齐 〈 可 能 是 文本 的 项 部， 也 可 能 是 图 像 的 顶部 ) 
middle 把 图 像 的 中 部 和 行 的 中 部 对 齐 〈 通 常 是 文本 行 的 基线 ， 并 不 是 实际 行 的 中 部 ) 
bottom 把 图 像 的 底部 和 同行 文本 的 底部 对 齐 

absmiddle 把 图 像 的 中 部 和 同行 中 最 大 项 的 中 部 对 齐 

baseline 把 图 像 的 底部 和 文本 的 基线 对 齐 

absbottom 把 图 像 的 底部 和 同行 中 的 最 低 项 对 齐 

left 使 图 像 和 左边 界 对 齐 〈 文 本 环绕 图 像 ) 

Tight 使 图 像 和 右边 界 对 齐 〈 文 本 环绕 图 像 ) 


例 3.03 在 头像 选择 页 面 ， 插 入 两 行 供 选择 的 头像 图 片 ， 并 且 设 置 图 像 与 同行 文字 的 中 部 对 齐 ， 
代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \03\3.03 ) 


01 <body> 

02 <h3> 请 选择 您 喜欢 的 头像 : </h3> 

03 <hr size="2" /> 

04 <!- 在 插入 的 两 行 图 片 中 ， 分 别 设置 图 片 的 对 齐 方式 为 middle--> 

05 第 一 组 人 物 头像 <img src="images/01.gif' border="1" align="middle"/> 
06 <img src="images/02.gif" border="1" align=" middle "/> 
07 <img src="images/03.gif" border="1" align=" middle "/> 
08 <img src="images/04.gif" border="1" align=" middle "/> 
09 <br /><br /> 

10 第 二 组 人 物 头像 <img src="images/8.gif" border="1" align="middle"/> 
人 <img src="images/9.gif" border="1" align=" middle "/> 
12 <img src="images/10.gif" border="1"align=" middle "/> 
13 <img src="images/11.gif" border="1"align=" middle "/> 
14 </body> 


完 代 码 后 ， 在 浏 览 器 中 运行 代码 ， 显 示 页 面 效果 如 图 3.3 所 示 。 


本 口 设 是 图 像 的 水 干 辣 距 x 


第 二 组 人 物 头像 


图 3.3 设置 图 像 的 水 平 间距 
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3.2.3 ”替换 文本 与 提示 文字 
在 HTML 中 ， 可 以 通过 为 图 像 设置 蔡 换文 本 和 替换 文字 来 添加 提示 信息 ， 其 中 ， 提 示 文 字 在 鼠标 
悬 停 在 图 像 上 时 显示 ， 而 蔡 换文 本 是 在 图 像 无 法 正常 显示 时 显示 ， 用 以 告知 用 户 这 是 一 张 什么 图 片 。 
1. 添加 图 像 的 提示 文字 一 一 title 


通过 title 属性 可 以 为 图 像 设置 提示 文字 。 当 浏览 网 页 时 ， 如 果 图 像 下 载 完成 ， 鼠 标 放 在 该 图 像 上 ， 
鼠标 旁边 会 出 现 提示 文字 。 也 就 是 说 ， 当 鼠标 指向 图 像 上 方 时 ， 稍 等 片刻 ， 可 以 出 现 图 像 的 提示 性 文 
字 ， 用 于 说 明 或 者 描述 图 像 ， 其 语法 格式 如 下 。 


01 ”<img src=" 图 像 文件 的 地 址 "title="> 
其 中 ，title 后 面 的 双 引 号 中 的 内 容 为 图 像 的 提示 文字 。 
2. 添加 图 像 的 蔡 换 文字 一 一 alt 


如 果 图 片 由 于 下 载 或 者 路 径 的 问题 无 法 显示 时 , 可 以 通过 alt 属性 在 图 片 的 位 置 显示 定 义 的 蔡 换文 
字 ， 其 语法 格式 如 下 。 


01 ”<img src=" 图 像 文件 的 地 址 " alt="> 
其 中 ，alt 后 面 的 双 引 号 中 的 内 容 为 图 像 的 替换 文本 。 


VE 


在 上 面 语法 中 ， 提 示 文 字 和 替换 文本 的 内 容 可 以 是 中 文 的 ， 也 可 以 是 英文 的 。 


例 3.04 在 五 子 棋 游戏 简介 页 面 中 ,为 图 片 添加 提示 文字 与 替换 文本， 代码 如 下 。( 实例 位 置 : 资 
源 包 \ 源 码 \03\3.04 ) 


01 <body> 

02 ”<h2 align="center"> 五 子 棋 游戏 简介 </h2> 

03 ”<p>&nbspi&nbsp;《 五 子 棋 》 是 由 明日 科技 研发 的 一 款 老少 皆 宜 的 休闲 类 棋牌 游戏 。 其 起 源 于 中 国 古 代 传 
统 的 黑白 棋 中 之 一 ， 玩 起 来 妙趣 横生 ， 引 人 入 胜 ， 不 仅 能 增强 思维 能 力 ， 而 且 可 以 富 含 哲理 ， 有 助 于 修 
身 养 性 。</p> 

游戏 规则 : 

05 ”<p>&nbspi&nbsp; 玩 游戏 时 ， 既 可 以 随机 匹配 玩家 ， 也 可 以 与 朋友 对 弈 ， 或 者 无 聊 时 选择 人 机 对 弈 。 画 面 

简单 大 方 。 游 戏 中 ， 最 先 在 棋盘 的 横向 、 纵 向 或 斜 向 形成 连续 的 相同 的 五 个 棋子 的 一 方 获胜 。</p> 

06 ”<!- 插 入 五 子 棋 的 游戏 图 片 ， 并 且 分 别 设置 其 提示 文字 和 替换 文本 --> 

07 <img src="img/gamehall.jpg”alt=" 游 戏 大 厅 ”title=" 欢 迎 进入 五 子 棋 游 戏 大 厅 "” hspace="50" 

align="top"> 

08 ”<img src="img/welcome.png" alt=" 五 子 棋 欢迎 界面 " title=" 欢 迎 体验 五 子 棋 游 戏 " height="400"> 

09 </body> 


编辑 完 代码 后 ， 在 浏览 器 中 运行 代码 ,页 面 效 果 如 图 3.4 所 示 ， 左 边 图 片 由 于 图 片 格式 错误 ,无 法 
正常 显示 ， 所 以 图 片 位 置 显示 营 换 文本 “游戏 大 厅 ” 而 鼠标 放置 在 第 二 张 图 片 时 ， 图 片上 会 显示 提示 
文字 “欢迎 体验 五 子 棋 游 戏 ”。 


£ 
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五 子 棋 游戏 简介 


《五 子 模 》 且 由 明日 科技 研发 的 一 款 老 少 着 让 的 休 亲 类 棋牌 游戏 。 其 起 溧 于 中 国 古 代 传 统 的 壬 白 模 
中 之 一 ， 玩 起 来 妙 矢 横生 ， 引 人 入 胜 , 不 仅 能 增强 轩 维 兹 力 ， 而 吾 可 以 富 合 哲 理 ， 有 助 于 修身 共性 ， 


游戏 规则 


玩 游戏 时 ， 赋 可 以 随机 下 配 质 家 ， 也 可 以 与 盟友 对 闻 ， 或 者 无 到 时 选择 人 机 对 罕 。 画 面 简单 大 方 . 
游戏 中 ， 县 先 在 棋 生 的 横向 、 欠 向 或 余 问 形成 连 皖 的 相同 的 五 个 棋子 的 一 方 为 胜 - 


pps mone 


3.4 设置 图 片 蔡 换 文本 和 提示 文字 


链接 (link)， 全 称 为 超 文本 链接 ， 也 称 为 超 链接 ， 是 HTML 的 一 个 很 强大 和 非常 有 价值 的 功能 。 
它 可 以 实现 将 文档 中 的 文字 或 者 图 像 与 男 一 个 文档 、 文 档 的 一 部 分 或 者 一 幅 图 像 链接 在 一 起 。 一 个 网 
站 是 由 多 个 页 面 组 成 的 ， 页 面 之 间 依 据 链接 确定 相互 的 导航 关系 。 当 在 浏览 器 中 用 鼠标 单 击 这 些 对 象 
时 ， 浏 览 器 可 以 根据 指示 载 入 一 个 新 的 页 面 或 者 转 到 页 面 的 其 他 位 置 。 常 用 的 链接 分 为 文本 链接 和 书 
签 链 接 。 下 面具 体 介 绍 这 两 种 链接 的 使 用 方法 。 


3.3.1 文本 链接 


在 网 页 中 , 文本 链接 是 最 常见 的 一 种 。 它 通过 网 页 中 的 文件 和 其 他 的 文件 进行 链接 ,语法 格式 如 下 。 
01 ”<a href="" target=""> 链 接 文字 </a> 


加 ”href: 为 链接 地 址 ， 是 Hypertext Reference 的 缩写 。 
target: 为 打开 新 窗口 的 方式 ， 主 要 有 以 下 4 个 属性 值 。 
> _blank: 新 建 一 个 窗口 打开 。 
> _parent: 在 上 一 级 窗口 打开 ， 常 在 分 帧 的 框架 页 面 中 使 用 。 
> _self: 在 同一 窗口 打开 ， 默 认 值 。 
> _top: 在 浏览 器 的 整个 窗口 打开 ， 将 会 忽略 所 有 的 框架 结构 。 
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C4 明 
在 该 语法 中 ， 链 接地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 。 


例 3.05 “在 页 面 中 添加 文字 导航 和 图 像 ， 并 且 通 过 <a> 标 签 为 每 个 导航 栏 添加 超 链接 ， 代 码 如 下 。 
(实例 位 置 : 资源 包 \ 源 码 \03\3.05 ) 


01 <divclass="mr-cont"> 

02 <img src="img/logo.png" alt="51 购 商城 ">&nbsp;&nbsp;&nbsp; 

03 <a href="#"> 首 页 </a>&nbsp;&nbsp;&nbsp; 

04 <a href="link.html" target="_blank"> 手 机 酷 玩 </a>&nbsp;&nbsp;&nbsp; 
05 <a href="link.html"target=”blank"> 精 品 抢购 </a>&nbsp;&nbsp;&nbsp; 
06 <a href="ink.html"target=" blank"> 手 机 配件 </a><br> 

07 <img src="img/ban.jpg" alt="> 

08 </div> 


完成 代码 编辑 后 ， 在 浏览 器 中 运行 ， 显 示 页 面 效果 如 图 3.5 所 示 ， 当 单 击 “ 手 机 酷 玩 ”“ 精 品 抢购 ” 
手机 配件 ”时 ， 页 面 会 跳 转 到 51 购 商 城 的 欢迎 界面 ， 如 图 3.6 所 示 。 


© | © WEVWWEeode/SUOS/indexhtml 


写 1 购 商城 az。 jn jai 
HUAWEI Mate 9 Pia 


© | @ Mey///Etcode/SUOSNink htm 


欢迎 来 到 51 购 商城 


点 击 此 冰 站 回 主页 


进步 ,再 进一步 
昔 命 性 的 安 点 体验 
HUAWEI Mate 9 


从 为 1 蛋 卡 了 各 和 


从  Eewul 


Vicpu es 


图 3.6 单 击 超 链接 后 的 跳 转 页 面 
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国内 多 学 两 招 
在 填写 链接 地 址 时 ， 为 了 简化 代码 和 避免 文件 位 置 改变 而 导致 链接 出 错 ， 一 般 使 用 相对 地 址 。 


3.3.2 ”书签 链接 


在 浏览 页 面 时 ， 如 果 页 面 的 内 容 较 多 ， 页 面 过 长 ， 浏 览 时 需要 不 断 地 拖 电 滚 动 条 ， 很 不 方便 ， 如 
果 要 寻找 特定 的 内 容 ， 就 更 加 不 方便 。 这 时 如 果 能 在 该 网 页 或 男 一 个 页 面 上 建立 目录 ， 浏 览 者 只 要 单 
击 目录 上 的 项 目 就 能 自动 跳 到 网 页 相应 的 位 置 进行 阅读 ， 这 样 无 疑 是 最 方便 的 事 ， 并 且 还 可 以 在 页 面 
中 设 定 诸 如 “返回 页 首 ” 之 类 的 链接 。 这 就 称 为 书签 链接 。 

建立 书签 链接 分 为 两 步 ， 一 是 建立 书签 ， 二 是 为 书签 制作 链接 。 

例 3.06 在 网 页 中 添加 书签 链接 ， 单 击 文字 时 ， 页 面 跳 转 到 相应 位 置 。 其 实现 过 程 如 下 。( 实例 位 
置 : 资源 包 \ 源 码 \03\3.06 ) 

(1) 建立 书签 。 分 别 为 每 一 版 块 的 位 置 后 面 的 文字 (例如 “华为 荣 炮 ”“ 华 为 p8” 等 ) 建立 书签 ， 
部 分 代码 如 下 。 

01 <div class="mr-txt"> 

02 <h3>&nbsp; 位 置 <a name="rongyao"> 华 为 荣光 </a><a href=" 扒 op">>> 回 到 顶部 </a></h3> 


03 <div class="mr-phone rongyao"> 

04 <div class="mr-pic"><img src="images/ry1.jpg" alt=""></div> 
05 <div class="mr-pic"><img src="images/z5.jpg" alt=""></div> 
06 <div class="mr-pic"><img src="images/z7.jpg" alt=""></div> 
07 <div class="mr-pic"><img src="images/ry4.jpg" alt=""></div> 
08 <div class="mr-pic"><img src="images/ry5.jpg" alt=""></div> 
09 <div class="mr-pic"><img src="images/ry6.jpg" alt=""></div> 
10 <div class="mr-pic"><img src="images/ry7.jpg" alt=""></div> 
yl | <div class="mr-pic"><img src="images/ry8.jpg" alt=""></div> 
12 </div> 


13 <h3 class="local">&nbsp; 位 置 : <a name="mate8"> 华 为 mate8<a href=" 失 op">>> 回 到 顶部 </a></h3> 
14 <div class="mr-phone mate8"> 


15 <div class="mr-pic"><img src="images/mate81.jpg" alt=""></div> 
16 <div class="mr-pic"><img src="images/mate82.jpg" alt="></div> 
<div class="mr-pic"><img src="images/mate89.jpg" alt="></div> 
18 <div class="mr-pic"><img src="images/mate84.jpg" alt="></div> 
19 
20 
21 
22 <div class="mr-pic"><img src="images/mate88.jpg" alt=""></div> 
23 </div> 
24 <h3 class="local">&nbsp; 位 置 : <a name="huaweip8"> 华 为 p8</a><a href="#top">>> 回 到 顶部 
</a></h3> 

(2) 给 在 网 页 导航 部 分 的 书签 建立 链接 ， 代 码 如 下 。 
01 <div class="mr-top"> 
02 <a name="top"><div class="mr-nav"> 
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03 <ul> 

04 <li><a href="#rongyao"> 华 为 荣 兆 </a></li> 

05 <li><a href="#mate8"> 华 为 mate8</a></li> 

06 <li><a href="#huaweip8"> 华 为 p8</a></li> 

07 <li><a href="#huawei5c"> 华 为 5a</a></li> 

08 <li><a href="#huaweig9"> 华 为 g9</a></li> 

09 </ul> 

10 <img class="mr-banner"src="images/1.jpg"width='945' height="430"></a> 
xi </div> 

12 </div> 


完成 代码 编辑 后 ， 在 浏览 器 中 打开 文件 ， 显 示 页 面 如 图 3.7 所 示 ， 当 单 击 上 面 的 “华为 荣耀 ”“ 华 
为 mate8” 等 文字 时 ， 页 面 会 跳 转 到 相应 位 置 。 
华为 荣光 


华为 matc8 华为 p8 为 5 华为 g9 


在 此 处 分 别 为 每 一 
个 书签 建立 链接 


背 我 月 
达 移 动 互联 新 生活 


音 控制 : 你 说 ， 我 做 
在 此 处 建立 第 一 
个 模块 的 书签 

日 _ EE 5 rr 一 

a Ep I 下 


图 3.7 实现 在 51 商城 手机 页 面 中 添加 书签 链接 


4 
NC 说 明 
本 实例 中 使 用 了 CSS 样式 ， 有 关 CSS 的 学 习 ， 请 参照 第 4 章 。 另 外， 上 述 代码 省 略 了 实例 中 
添加 第 二 、 三 版 块 手机 图 片 的 代码 ， 详 细 代码 ， 请 参照 资源 包 中 的 源码 。 


3.4 图 像 的 超 链 接 


3.4.1 图 像 的 基本 链接 
对 于 给 整个 一 幅 图 像 文 件 设置 超 链接 来 说 , 实现 的 方法 比较 简单 ， 其 实现 的 方法 与 文本 链接 类 似 ， 
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其 语法 格式 如 下 。 

01 ”<a href=" 链 接地 址 " target=" 目 标 窗口 的 打开 方式 "><img src=" 图 像 文件 的 地 址 "></a> 

在 上 面 的 语法 中 ，href 参数 用 来 设置 图 像 的 链接 地 址 ， 而 在 图 像 属 性 中 可 以 添加 图 像 的 其 他 参数 ， 
如 height、border、hspace 等 。 


例 3.07 新 建 一 个 HTML 文件 ， 应 用 <img> 标 签 添加 5 张 手 机 图 片 ， 并 为 其 设置 图 像 的 超 链 接 ， 
然后 再 应 用 <img> 标 签 添加 5 张 购物 车 图 标 ， 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \03\3.07 ) 


01 <divid="mr-content"> 


02 <div class="mr-top"> 

03 <h2> 手 机 </h2> <!- 通 过 <h2> 标 签 添加 二 级 标题 -> 
04 <p class="mr-p1"> 手 机 风暴 </p> <!- 通 过 <p> 标 签 添加 文字 --> 
05 <p class="mr-p2">></p> 

06 <p class="mr-p2"> 更 多 手机 </p> 

07 <p class="mr-p2">OPPO</p> 

08 <p class="mr-p2"> 联 想 </p> 

09 <p class="mr-p2"> 魅 族 </p> 

10 <p class="mr-p2"> 乐 视 </p> 

11 <p class="mr-p2"> 荣 耀 </p> 

12 <p class="mr-p2"> 小 米 </p> 

13 </div> 

14 <img src="images/8-1.jpg" alt=" class="mr-img1"> <!-- 通 过 <img> 标 签 添加 图 片 --> 
15 <div class="mr-right"> 

16 <a href="images/link.png" target="_blank"> 

gk <img src="images/8-1a.jpg" alt="" att="a"></a> 

18 <a href="images/link.png" target="_blank"> 

19 <img src="images/8-1b.jpg" alt="" att="b"></a><br/> 

20 <a href="images/link.png" target="_blank"> 

24 <img src="images/8-1c.jpg" alt="" att="c"></a> 

22 <a href="images/link.png" target="_blank"> 

23 <img src="images/8-1d.jpg" alt="" att="d"></a> 

24 <a href="images/link.png" target="_blank"> 

25 <img src="images/8-1e.jpg" alt="" att="e"></a> 

26 <img src="images/8-19.jpg" alt="" class="mr-car1"> 

27 <img src="images/8-1g.jpg" alt="" class="mr-car2"> 

28 <img sl mages/8-1g.jpg" alt="" class="mr-car3"> 

29 <img src="images/8-1g.jpg" alt="" class="mr-car4"> 

30 <img src="images/8-19.jpg" alt="" class="mr-car5"> 

Sl <p class="mr-price1">OPPO R9 Plus<br/><span>3499.00</span></p> 
32 <p class="mr-price2">vivo Xplay6<br/><span>4498.00</span></p> 

33 <p class="mr-price3">Apple iPhone 7<br/><span>5199.00</span></p> 
34 <p class="mr-price4">360 NS4<br/><span>1249.00</span></p> 

35 <p class="mr-price5"> 小 米 Note4<br/><span>1099.00</span></p> 

36 </div> 

37 </div> 


编辑 完 代码 后 ， 在 浏览 器 中 打开 文件 ， 可 以 看 到 如 图 3.8 所 示 的 页 面 。 单 击 手机 图 片 ， 页面 将 会 跳 
转 到 一 张 展示 商品 详情 的 图 片 ， 如 图 3.9 所 示 。 
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| 手机 手机 ER 时 


图 3.8 商品 展示 页 面 的 效果 


华为 荣 爆 畅 玩 4X 白色 移动 4G 手 机 双 卡 双 待 
铺 优 惠 “购物 满 2 件 打 8 折 ， 注 3 件 7 折 


*499.00 


浙江 省 "| 温州 市 "瑞安 区 "| 快递 10 元 


月 销量 1015 累计 销量 6015 累计 评价 640 


冰河 浸 。 线 绒 友 
原 | 电源 存 全 大 法 


+ 库存 1000 件 


到 上 一 


3.9” 跳 转 后 的 商品 详情 页 面 


NC 锐 明 


本 实例 中 使 用 了 CSS3 样式 ， 有 关 CSS3 的 学 习 ， 请 参照 第 4 章 。 


3.4.2 图 像 热 区 链接 
除了 对 整个 图 像 进行 超 链接 的 设置 外 ， 还 可 以 将 图 像 划分 成 不 同 的 区 域 进行 链接 设置 。 而 包含 热 
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区 的 图 像 也 可 以 称 为 映射 图 像 。 

为 图 像 设 置 热 区 链接 时 ， 大 致 需要 经 过 以 下 两 个 步骤 。 

首先 需要 在 图 像 文件 中 设置 映射 图 像 名 。 在 添加 图 像 的 <img> 标 签 中 使 用 usemap 属性 添加 图 像 要 
引用 的 映射 图 像 的 名 称 ， 语 法 格式 如 下 。 


01 ”<img src=" 图 像 地 址 " usemap=" 映 射 图 像 名 称 "> 
然后 需要 定义 热 区 图 像 以 及 热 区 的 链接 ， 语 法 格式 如 下 。 
01 ”<map name=" 映 射 图 像 名 称 "> 
02 <area shape=" 热 区 形状 " coords=" 热 区 坐标 " href=" 链 接地 址 " /> 
03 </map> 
在 该 语法 中 ， 要 先 定义 映射 图 像 的 名 称 ， 然 后 再 引用 这 个 映射 图 像 。 在 <area> 标 签 中 定义 了 热 
的 位 置 和 链接 ， 其 中 shape 用 来 定义 热 区 形状 ， 可 以 取 值 为 rect〈 拢 形 区 域 )、circle〈 圆 形 区 域 ) 以 
及 poly 多边形 区 域 ); coords 参数 则 用 来 设置 区 域 坐标 ， 对 于 不 同形 状 来 说 ，coords 设置 的 方式 也 
不 同 。 
加 ”对 于 和 矩形 区 域 rect 来 说 ，coords 包含 4 个 参数 ， 分 别 为 left、top 、right 和 bottom， 也 可 以 将 
这 4 个 参数 看 作 和 矩形 两 个 对 角 的 点 坐标 。 
回 ”对 于 圆 形 区 域 circle 来 说 ，coords 包含 3 个 参数 ， 分 别 为 center-x、center-y 和 tadius， 也 可 以 
看 作 是 圆 形 的 圆心 坐标 (x,y) 与 半径 的 值 。 
回 ”对 于 多 边 形 区 域 poly 设置 坐标 参数 比较 复杂 ， 跟 多 边 形 的 形状 息息相关 。coords 参数 需要 按 
照 顺 序 ( 可 以 是 逆 时 针 ， 也 可 以 是 顺 时 针 ) 取 各 个 点 的 x、y 坐标 值 。 由 于 定义 坐标 比较 复杂 
而 且 难 以 控制 ， 一 般 情况 下 都 使 用 可 视 化 软件 进行 这 种 参数 的 设置 。 
例 3.08 新 建 一 个 HIML 文件 ， 然 后 使 用 <img> 标 签 添加 图 片 ， 并 且 为 图 像 添加 热 区 链接 ， 其 代 
码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \03\3.08 ) 


01 <divid="mr-cont"> 


| 


02 <img class="addr" src="img/big.png" usemap="mr-hotpoint" /> 

03 <map name="mr-hotpoint"> 

04 <area shape="rect" coords="45,126,143,203" href="img/ad.jpg" title=" 电 脑 精装 " target="_blank"/> 
05 <area shape="rect"coords="410,80,508,174" href="img/ad4.png" title=" 常 用 家 电 " target="_blank" /> 
06 <area shape="rect" coords="30,250,130,350" href="img/ad1.png" title=" 手 机 数码 " target="_blank” /> 
07 <area shape="rect" coords="430,224,528,318" href="img/ad3.png"title=" 鲜 货 直 达 "target="_blank"/> 
08 </map> 

09 </div> 


编辑 完 代码 后 ， 在 浏览 器 中 运行 文件 ， 可 以 看 到 打开 的 页 面 中 包含 一 张 图 片 ， 如 图 3.10 所 示 。 当 
单 击 图 片 的 “电脑 精装 ”的 彩色 会 话 框 时 ， 页 面 会 跳 转 至 一 张 电脑 图 片 ， 如 图 3.11 所 示 。 
SC 

单 击 图 像 中 的 其 他 3 个 彩色 会 话 框 ， 页 面 将 会 跳 转 到 对 应 的 图 片 。 本 实例 就 不 一 一 展示 了 。 
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图 3.10 图 像 热 区 链接 页 面 的 效果 


“本 该 加 此 人 


开启 时尚 新 商 务 


HUAWEI MateBook 


3 过 一 二 一 般 解 锁 | 轻薄 时 尚 | 高 效 合 一 


ss < 


所 


产品 视频 (DF) 


图 3.11 单 击 热 区 链接 的 中 转 页 面 
3 :小 结 


本 章 着 重 讲解 图 片 和 超 链 接 的 使 有用。 其中， 图像 是 丰富 多 彩 的 网 页 必 不 可 少 的 元 素 之 一 ， 本 章 主 


q 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


要 讲解 了 如 何在 HTML 中 添加 图 像 ， 并 且 对 图 像 进 行 相关 的 设置 。 另 外 ， 链 接 也 是 网 页 必 不 可 少 的 元 
素 之 一 ， 它 能 完成 各 个 页 面 之 间 的 跳 转 ， 实 现 文档 互联 。 


3.6 实 战 


3.6.1 实战 一 : 显示 图 书 封面 


利用 图 像 实现 图 书展 示 功 能 , 即 在 页 面 中 显示 图 书 封面 , 如 图 3.12 所 示 。( 资源 包 \ 源 码 \03\ 实 战 \01 ) 


中 oS ED x Ny 
© | © fley//Ecode/Try/00Yindexhtml 


图 3.12 显示 图 书 封面 
3.6.2 ”实战 二 : 制作 商品 评价 页 面 
制作 一 个 商品 评价 页 面 ， 设 置 图 片 的 提示 文字 为 商品 的 相关 信息 。( 资源 包 \ 源 码 \03\ 实 战 \02 ) 
3.6.3 实战 三 : 制作 抽奖 页 面 


制作 抽奖 效果 ， 单 击 页 面 中 的 开始 抽奖 时 ， 页 面 跳 转 到 未 中 奖 的 页 面 。( 资源 包 \ 源 码 \03\ 实 战 \03 ) 
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CSS3 概述 

( 名 * 视频 讲解 :1 小 时 6 分钟 ) 


C5S (Cascading Style Sheet， 层 登 样 式 表 ) 是 早 在 几 年 前 就 问世 的 一 种 样式 表 
语言 ， 至 今 还 没有 完成 所 有 规范 化 草案 的 制订 。 虽 然 最 终 的 、 完 整 的 、 规 范 权威 的 
C553 标准 还 没有 尘埃 落 定 ， 但 是 各 主流 浏览 器 已 经 开始 支持 其 中 的 绝 大 部 分 将 性 。 
如 果 想 成 为 前 卫 的 高 级 网 页 设计 师 ， 那 么 就 应 该 从 现在 开始 积极 去 学 习 和 实践 ， 本 
章 将 对 C553 的 新 将 性 、C553 的 常用 属性 ， 以 及 常用 的 几 种 C553 选择 器 进行 详细 
讲解 。 

学 习 摘 要 : 

WI CSS 的 发 展 史 

mi CSS3 中 的 选择 路 

| CSS3 中 的 常用 属性 
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4.1 CSS3 概述 


本 节 为 了 解 性 内 容 , 主要 为 大 家 介绍 CSS 的 发 展 历史 , 并 且 通 过 举例 向 大 家 演示 CSS 的 基本 语法 。 
而 CSS 的 具体 使 用 ， 在 后 面 的 小 节 会 有 具体 介绍 。 


4.1.1 CSS 的 发 展 史 


CSS (Cascading Style Sheet， 层 合 样 式 表 ) 是 一 种 网 页 控制 技术 ， 采 用 CSS 技术 ， 可 以 有 效 地 对 
页 面 布 局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精准 的 控制 。 网 页 最 初 是 用 HTML 标签 定义 页 面 文 
档 及 格式 , 例如 标题 标签 <h1l>、 段 落 标 签 <p> 等 , 但 是 这 些 标记 无 法 满足 更 多 的 文档 样式 需求 。 为 了 解 
决 这 个 问题 ，W3C 在 1997 年 颁布 HTML4 标准 的 同时 ， 也 公布 了 CSS 的 第 一 个 标准 CSS1。 自 CSS1 
版 本 之 后 ， 又 在 1998 年 5 月 发 布 了 CSS2 版 本 ， 在 这 个 样式 表 中 开始 使 用 样式 表 结 构 。 又 过 了 6 年 ， 
也 就 是 2004 年 ，CSS2.1 正式 推出 。 它 在 CSS2 的 基础 上 略微 做 了 改动 ， 删 除了 许多 诸如 text-shadow 
等 不 被 浏览 器 所 支持 的 属性 。 

然而 ， 现 在 所 使 用 的 CSS3 基本 上 是 在 1998 年 推出 的 CSS2 的 基础 上 发 展 而 来 的 。10 年 前 在 
Internet 刚 开 始 普及 时 , 就 能 够 使 用 样式 表 来 对 网 页 进行 视觉 效果 的 统一 编辑 , 确实 是 一 件 可 喜 的 事情 。 
但 是 在 这 10 年 间 CSS 的 版 本 可 以 说 是 基本 上 没有 什么 很 大 的 变化 ， 一 直到 2010 年 终于 推出 了 一 个 全 
新 的 版 本 一 一 CSS3 。 

与 CSS 以 前 的 版 本 相 比 较 ，CSS3 的 变化 是 革命 性 的 ， 而 不 是 仅 限 于 局 部 功能 的 修订 和 完善 。 尽 
管 CSS3 的 一 些 特性 还 不 能 被 很 多 浏览 器 支持 ， 或 者 说 支持 得 还 不 够 好 ， 但 是 它 依然 让 我 们 看 到 了 网 
页 样式 的 发 展 方向 和 使 命 。 


4.1.2 一 个 简单 的 CSS 示例 


简单 地 说 ，CSS3 通过 几 行 代码 就 可 以 实现 很 多 以 前 需要 使 用 脚本 才能 实现 的 效果 ， 这 不 仅 简化 了 
设计 师 的 工作 ， 而 且 还 能 加 快 页 面 载 入 速度 ， 其 语法 格式 如 下 。 


01 selector {property:value} 


回 selector: 选择 器 。CSS 可 以 通过 某 种 选择 器 选中 想 要 改变 样式 的 标签 。 

回 ”property: 希望 改变 的 该 标签 的 属性 。 

加 ”value: 该 属性 的 属性 值 。 

下 面 通过 实现 添加 页 面 背景 以 及 设置 文字 阴影 来 演示 CSS 的 使 用 过 程 ， 示 例 效 果 如 图 4.1 所 示 。 
首先 建立 一 个 HIML 文件 ,在 HTML 文件 中 通过 添加 标签 ， 以 完成 页 面 的 基本 内 容 ， 具 体 代码 如 下 。 
01 <div class="mr-box"> 


02 <div class="mr-shadow"><font> 无 可 辨 </font>“ 薄 ”</div> 
03 <div class="mr-shadow1"> 薄 ，<font> 是 仅 13 毫米 ，1.1kg 才 有 的 意境 </font></div> 
04 </div> 
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图 4.1 添加 文字 阴影 和 定位 背景 图 片 


然后 建立 一 个 CSS 文件 夹 , 这 里 , 先 讲解 如 何 创建 一 个 CSS 文件 。 首先 , 进入 JetBrains WebStorm， 
如 图 4.2 所 示 ， 在 主 菜单 中 选择 File 一 New 命令 。 进 入 新 建文 件 类 型 选择 页 面 如 图 4.3 所 示 ， 然 后 在 新 
建文 件 类 型 选择 页 面 选 择 Stylesheet 命令 ， 页 面 跳 转 至 编辑 文件 名 称 页 面 ， 如 图 4.4 所 示 。 
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[3 
4.2 JetBrains WebStorm 主 窗口 图 43 新 建文 件 类 型 选择 页 面 
在 编辑 CSS 文件 名 称 页 面 的 Name 一 栏 中 ， 输 入 文件 的 名 称 ， 然 后 单 击 OK 按钮 ， 页 面 跳 转 至 如 


4.5 所 示 的 页 面 ， 此 时 一 个 CSS 文件 已 经 创建 完成 。 


a 


建立 CSS 文件 以 后 


01 
02 
03 
04 
05 
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图 44 CSS 文件 命名 页 面 
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4.5 CSS 文件 页 面 


.mr-box{ 
width: 421px; 
height: 480px; 
margin: 0 auto; 


background: no-repeat url(../images/1.jpg) #E0D4D4 47% 43%; 


background-size: 220px 254px; 


} 

让 设置 第 一 部 分 文字 的 样式 */ 

.mr-shadow { 
margin-left:100px; 


UTFe: 训 


， 在 如 图 4.5 所 示 的 代码 编辑 区 输入 如 下 代码 即 可 。 


让 设置 页 面 的 总 体 样式 */ 
让 设置 页 面 的 大 小 */ 


"左右 外 边 距 自动 居中 */ 


/设置 页 面 背景 
/设置 页 面 背 景 的 尺寸 % 


/设置 文字 的 左边 距 六 
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11 color: #dc1844; 让 设置 文字 颜色 */ 

按 font: 900 64px/64px sans-serif: ”设置 文字 的 粗细 、 大 小 、 字 体 */ 
43 /设置 文字 的 阴影 ， 参 数 含义 分 别 是 水 平方 向 位 移 、 垂 直方 向 位 移 、 阴 影 宽 度 、 阴 影 颜色 % 

14 text-shadow: -1px 0 0 #0a0a0a, -4px 0 0 #6f3b7b, -6px 0 0 #080808, -8px 0 0 #121ff1; 

k 3} 

16 .mr-shadow font{ 

17 font-size: 30px; 

18 } 

19 .mr-shadow1{ 让 设置 第 二 部 分 文字 样式 */ 

20 color: #6C0305; ”设置 文字 颜色 */ 

21 margin-top: 264px:; 让 设置 向 上 的 外 边 距 */ 

22 font: 100 54px/64px "黑体 '; 

23 text-shadow: 0 -1px 0 #ca3636,0 2px 0 #ea1414,2px -2px 1px #c3d259,-2px 2px 15px #674242; 
24 } 

25 .mr-shadow1 font{ 

26 font-size: 35px; 
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最 后 ， 用 户 需 要 将 CSS 文件 链接 到 HTML 文件 。 在 HTML 页 面 的 <head> 标 签 中 添加 如 下 代码 。 
01 <link href="css/css.css" type="text/css" rel="stylesheet"> 
其 中 ， href 为 CSS 文件 的 地 址 ,type 表示 所 链接 文件 的 类 型 ,rel 表示 所 连接 文件 与 该 HTML 文件 
的 关系 。type 和 rel 属性 的 属性 值 是 不 需要 用 户 改 变 的 。 
人 
SC 说 明 
上 面 链 接 CSS 文件 的 这 行 代码 ， 正 常 可 以 写 在 HIML 文件 的 任意 位 置 ， 例如， 在 <body> 标 签 中 


或 上 方 都 可 以 , 但 是 ， 由 于 浏览 网 页 时 ， 系 统 加 载 文件 的 顺序 为 自 上 而 下 的 ， 所 以 为 了 让 页 面 内 容 加 
载 出 来 时 就 显示 其 样式 ， 上 面 这 和 句 代 码 一 般 写 在 <head> 标 签 中 ， 或 者 写 在 <head> 标 签 与 <body> 之 间 


4.2 CSS3 中 的 选择 器 


前 面 我 们 了 解 了 CSS 可 以 改变 HTML 中 标签 的 样式 ， 那 么 CSS 是 如 何 改变 它 的 样式 的 呢 ? 简单 
地 说 , 就 是 告诉 CSS 的 3 个 问题 , 就 是 改变 谁 、 改 什么 、 怎么 改 , 告诉 CSS 改变 谁 时 就 需要 用 到 选择 器 。 
选择 器 是 用 来 选择 标签 的 方式 ， 例 如 ，ID 选择 器 就 是 通过 ID 来 选择 标签 ， 类 选择 器 就 是 通过 类 名 选择 
标签 ， 改 什么 ， 就 是 告诉 CSS 改变 这 个 标签 的 什么 属性 ， 怎 么 改 ， 则 是 指定 这 个 属性 的 属性 值 。 

举 个 例子 ， 如 果 我 们 要 将 HTML 中 所 有 <p> 标 签 的 文字 变 成 红色 ， 我 们 需要 通过 标签 选择 器 告诉 
CSS 要 改变 所 有 <p> 标 签 ， 改变 它 的 颜色 属性 ， 改 为 红色 。 清楚 了 这 3 个 问题 ，CSS 就 可 以 乖 冬 地 为 我 
们 服务 了 。 


SO 四 


通过 选择 器 所 选中 的 是 所 有 符合 条 件 的 选择 器 ， 所 以 不 一 定 只 有 一 个 标签 。 
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4.2.1 属性 选择 器 


属性 选择 器 就 是 通过 属性 来 选择 标签 ， 这 些 属 性 既 可 以 是 标准 属性 (HIML 中 默认 该 有 的 属性 ， 
例如 ，input 标签 中 的 type 属性 )， 也 可 以 是 自 定义 属性 。 

在 HTML 中 , 通过 各 种 各 样 的 属性 , 可 以 给 元 素 增加 很 多 附加 信息 。 例 如, 在 一 个 HTML 页 面 中 ， 
插入 多 个 <p> 标 签 ， 并 且 为 每 个 <p> 标 签 设 定 不 同 的 属性 ， 示 例 代码 如 下 。 


01 ”<p font="fontsize"> 编 程 图 书 </p> <!-- 设 置 font 属性 的 属性 值 为 fontsize --> 
02 ”<p color="red">PHP 编程 </p> <I-- 设 置 color 属性 的 属性 值 为 red --> 

03 ”<p color="red">Java 编程 </p> <!-- 设 置 color 属性 的 属性 值 为 red --> 

04 ”<p font="fontsize"> 当 代 文 学 </p> < 上 -设置 font 属性 的 属性 值 为 fontsize--> 
05 ”<p color="green"> 盗 幕 笔 记 </p> <!-- 设 置 color 属性 的 属性 值 为 green--> 


06 ”<p color="green"> 阴 朝 那 些 事 儿 </p> ”<!-- 设 置 color 属性 的 属性 值 为 green --> 


在 HTML 中 为 标签 添加 属性 之 后 , 就 可 以 在 CSS3 中 使 用 属性 选择 器 选择 对 应 的 标签 , 来 改变 样式 。 
在 使 用 属性 选择 器 时 ， 需 要 声明 属性 与 属性 值 ， 声 明 方法 如 下 。 


01 [att=val] 人 1 

其 中 ，att 代表 属性 ，val 代表 属性 值 。 例 如 ， 如 下 代码 就 可 以 实现 为 相应 的 <p> 标 签 设置 样式 。 
01 [color=red]{ /* 选 择 所 有 color 属性 的 属性 值 为 red 的 标签 */ 

02 color red; "设置 其 字体 颜色 为 红色 */ 

03 = 于 

04 [color=green]{ /* 选 择 所 有 color 属性 的 属性 值 为 green 的 <p> 标 签 */ 
05 color: green; 设置 其 字体 颜色 为 绿色 */ 

06 } 

07 [font=fontsize]{ A* 选 择 所 有 font 属性 的 属性 值 为 fontsize 的 <p> 标 签 */ 
08 font-size: 20px:; /设置 其 字体 大 小 为 20 像素 */ 

09 } 


注意 
给 元 素 定义 属性 和 属性 值 时 ， 可 以 任意 定义 属性 ， 但 是 要 尽量 做 到 “ 见 名 知 意 ”， 也 就 是 说 ， 
看 到 这 个 属性 名 和 属性 值 ， 自 己 能 看 明白 设置 这 个 属性 的 用 意 。 


例 4.01 使 用 属性 选择 器 ， 实 现 51 购 商 城 首页 的 手机 风暴 版 块 ， 主 要 步骤 如 下 。( 实例 位 置 : 资 
源 包 \ 源 码 \04\4.01 ) 
(1) 新 建 一 个 HIML 文件 ， 通 过 <img> 和 <p> 标 签 添加 图 片 和 文字 ， 代 码 如 下 。 


01 <divclass="mr-right"> 

02 <!- 通 过 <img> 标 签 添加 5 张 手机 图 片 -> 

03 <img src="images/8-1a.jpg" alt="" att="a"> 

04 <img src="images/8-1b.jpg" alt="" att="b"><br/> 
05 <img src="images/8-1c.jpg" alt="" att="c"> 

06 <img src="images/8-1d.jpg" alt="" att="d"> 

07 <img src="images/8-1e.jpg" alt="" att="e"> 
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08 < 通过 <img> 标 签 添加 购物 车 侧 图 片 一 > 

09 <img src="images/8-1g.jpg" alt="" class="mr-car1"> 

10 <img src="images/8-1g.jpg" alt="" class="mr-car2"> 

yh | <img src="images/8-1g.jpg" alt="" class="mr-car3"> 

这 <img src="images/8-1g.jpg" alt="" class="mr-car4"> 

13 <img src="images/8-1g.jpg" alt="" class="mr-car5"> 

14 <!- 通 过 <p> 标 签 和 <span> 标 签 添加 手机 型 号 和 价格 --> 

15 <p class="mr-price1">OPPO R9 Plus<br><span>3499.00</span></p> 
16 <p class="mr-price2">vivo Xplay6<br/><span>4498.00</span></p> 

17 <p class="mr-price3">Apple iPhone 7<br/><span>5199.00</span></p> 
18 <p class="mr-price4">360 NS4<br/><span>1249.00</span></p> 

19 <p class="mr-price5"> 小 米 Note4<br/><span>1099.00</span></p> 

20 </div> 


(2) 使 用 属性 选择 器 改变 页 面 中 手机 图 片 的 大 小 以 及 位 置 ， 代 码 如 下 。 


01 /选择 HTML 中 att 属性 分 别 为 a、b、c、d、e 的 标签 ， 即 选中 5 个 手机 */ 
02 [att=al,[att=b],[att=c],[att=d],[att=e]{ 


03 width: 180px; ”设置 宽度 */ 

04 height: 182px; 让 设置 高 度 */ 

05 } 

06 [att=a]{ /使 用 属性 选择 器 选择 HTML 中 att 属性 分 别 为 a 的 标签 */ 
07 left: 140px; 

08 top: 20px; 

09 } 

10 [att=b]{ /使 用 属性 选择 器 设置 第 2 张 手机 图 片 位 置 及 大 小 */ 
11 left: 700px; 

12 top: 20px; 

人 时 

14 [att=c]{ /使 用 属性 选择 器 设置 第 3 张 手机 图 片 位 置 及 大 小 */ 
15 left: 400px; 

16 top: 180px; 

1 


完成 代码 编译 后 ， 在 浏览 器 中 运行 代码 ， 效 果 如 图 4.6 所 示 。 


att="b" 属 性 选择 器 


图 4.6 商城 首页 手机 版 块 
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/ 
CO 说 明 
本 实例 综合 使 用 类 选择 器 和 属性 选择 器 ， 其 中 ， 类 选择 器 主要 实现 购物 车 以 及 手机 型 号 文字 的 
样式 。 详细 代码 请 参照 资源 包 中 的 源码 。 


4.2.2 类 和 ID 选择 器 


在 CSS3 中 ， 除 了 属性 选择 器 ， 类 和 ID 选择 器 也 是 受到 广泛 支持 的 选择 器 。 在 某 些 方面 ， 这 两 种 
选择 器 比较 类 似 ， 不 过 也 有 一 些 重要 差别 。 

第 一 个 区 别 是 ID 选择 器 前 面 有 一 个 “# ”号 ， 也 称 为 棋盘 号 或 井 号 ， 语 法 如 下 。 

01 药 ntrofcolorred;} 

而 类 选择 器 前 面 有 一 个 “.” 号 ， 即 英文 格式 下 的 半角 句号 ， 语 法 如 下 。 

01 intro{color:red;} 

第 二 个 区 别 是 包 选择 器 引用 id 属性 的 值 ， 而 类 选择 器 引用 的 是 class 属性 的 值 。 


注意 
在 一 个 网 页 中 标签 的 class 属性 可 以 定义 多 个 ， 而 id 属性 只 能 定义 一 个 。 例 如 ， 一 个 页 面 中 只 
能 有 一 个 标签 的 ID 的 属性 值 为 intro。 


例 4.02 ”通过 类 选择 器 和 ID 选择 器 实现 一 个 商城 首页 的 爆 款 特卖 版 块 ， 主 要 实现 步骤 如 下 。 
(1) 新 建 一 个 HTML 文件 ， 在 该 文件 中 ， 首 先 通 过 <div> 标 签 对 页 面 进行 布局 ， 然 后 通过 <img> 

标签 和 <p> 标 签 添加 手机 的 图 片 和 价格 、 型 号 等 文字 ， 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \04\4.02 ) 
01 <divid="mr-content"> 


02 <div class="mr-top"> 爆 款 特卖 </div> 
03 <div class="mr-bottom"> 


04 <div class="mr-block1"><img src="images/8-2.jpg"class="mr-img"> ”<!-- 添 加 手机 图 片 --> 
05 <p class="mr-title"> 华 为 Mate8</p> <!-- 添 加 文字 --> 
06 <div> 

07 <div class="mr-mon"> ¥ 2998.00</div> 

08 <div class="mr-minute"> 秒 杀 </div> 

09 </div> 

10 </div> 

| <div class="mr-block1"> <img src="images/8-2c.jpg"class="mr-img"> 

12 <p class="mr-title"> 华 为 Mate9</p> 

13 <div> 

14 <div class="mr-mon">¥ 4798.00</div> 

1 <div class="mr-minute"> 秒 杀 </div> 

16 </div> 

17 </div> 

18 </div> 

19 </div> 
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(2) 新 建 一 个 CSS3 文件 ， 通 过 外 部 样式 引入 HTML 文件 中 ， 然 后 使 用 ID 选择 器 和 类 选择 器 设 
置 图 片 和 文字 的 大 小 、 位 置 等 ， 关 键 代码 如 下 。 


01 ”A 在 页 面 中 只 有 一 个 mr-content， 所 以 使 用 ID 选择 器 */ 
02 #mr-content{ 


03 width: 1090px; /设置 整体 页 面 宽度 为 1090 像素 */ 
04 height: 390px; 六 设置 整体 页 面 高 度 为 390 像素 */ 
05 margin: 0 auto; /设置 内 容 在 浏览 器 中 自 适应 %/ 
06 background: #ffd800; 让 设置 整体 页 面 的 背景 颜色 */ 

07 border 1px solid red; * 设 置 整体 内 容 边 框 */ 

08 text-align: left; /文字 的 对 齐 方 式 为 向 左 对 齐 */ 
09 } 

10 .mr-top{ "设置 标题 “热卖 爆 款 ” 的 属性 */ 
11 width: 1073px; * 设 置 宽度 */ 

2 height: 60px; 让 设置 高 度 */ 

13 padding: 20px 0 0 10px:; 让 设置 内 边 距 */ 

14 color: #8a5223; 让 设置 字体 颜色 */ 

15 font-size: 32px:; /设置 字体 大 小 

16 font-weight bolder 让 设置 内 字体 粗细 */ 

1 

18 .mr-bottom{ 

19 width: 1200px; ”设置 内 容 部 分 宽度 */ 

20 height: 336px; 让 设置 内 容 部 分 高 度 */ 

2100 

22 .mr-block1{ 

23 width: 260px; /设置 宽度 

24 height: 300px; 让 设置 高 度 */ 

25 float: left; 让 设置 浮动 */ 

26 text-align: center; 

27 margin-left: 10px; * 设 置 向 左 的 外 边 距 */ 

28 background: #FFF:; 设置 背景 */ 

2 


完成 代码 编辑 后 ， 在 浏览 器 中 运行 代码 ， 效 果 如 图 4.7 所 示 。 


华为 hat 


¥2998. 00 a 


¥2998. 00 aa 


¥4798. 00 Wa 


华 2ata 


¥4798. 00 a 


图 4.7 商城 首页 爆 款 特卖 版 块 
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V4 
SE 说 明 
上 面 的 实例 中 省 略 了 HTML 中 中 间 两 部 分 的 图 片 、 文 字 的 代码 ， 实 例 的 详细 代码 请 参照 资源 
包 中 的 源码 。 


4.2.3” 伪 类 和 伪 元 素 选 择 器 


当 我 们 浏览 网 页 时 ， 常 遇 到 一 种 情况 ， 就 是 每 当 鼠 标 放 在 某 个 元 素 上 ， 这 个 元 素 就 会 发 生 一 些 变 
化 ， 例 如 ， 当 鼠标 滑 过 导航 栏 时 ， 展 开导 航 栏 里 的 内 容 。 这 些 特效 的 实现 都 离 不 开 伪 类 选择 器 。 而 伪 
元 素 选择 器 则 是 用 来 表示 使 用 普通 标记 无 法 轻易 修改 的 部 分 ， 比 如 ， 一 段 文字 中 的 第 一 个 文字 等 。 


1. 伪 类 选择 器 


伪 类 选择 器 是 CSS3 中 已 经 定义 好 的 选择 器 ， 因 此 ， 程 序 员 不 能 随意 命名 。 它 是 用 来 对 某 种 特殊 
状态 的 目标 元 素 应 用 样式 。 比 如 ， 用 户 正在 单 击 的 元 素 ， 或 者 鼠标 正在 经 过 的 元 素 等 。 伪 类 选择 器 ， 
主要 有 以 下 4 种 。 

回 :link: 表示 对 未 访问 的 超 链接 应 用 样式 。 

回 :visited: 表示 对 已 访问 的 超 链接 应 用 样式 。 

回 :hover: 表示 对 鼠标 所 停留 的 元 素 应 用 样式 。 

回 :active: 表示 对 用 户 正 在 单 击 的 元 素 应 用 样式 。 

例如 ， 下 面 的 代码 就 是 通过 伪 类 选择 器 改变 特定 状态 的 标签 样式 。 


01 ailink{ 表示 对 未 访问 的 超 链接 应 用 样式 */ 

02 color: #000; 设置 其 字体 为 黑色 */ 

03 } 

04 a:visited{ A* 表 示 对 已 访问 的 超 链 接应 用 样式 */ 

05 color: #f00; 让 设置 其 为 红色 */ 

06 } 

07 .hov:hover{ /表示 对 鼠标 所 停留 的 类 名 为 hov 的 元 素 应 用 样式 */ 
08 border 2px red solid; * 添 加 边框 */ 

09 } 

10 .act:active { /表示 对 鼠标 所 停留 的 类 名 为 act 的 元 素 应 用 样式 */ 
11 background: #fff00; 让 添加 背景 颜色 */ 

检 王 让 


仿 o 注 意 


:link 和 :visited 只 对 链接 标签 起 作用 ， 对 其 他 标签 无 效 。 


Ng 
在 使 用 伪 类 选择 器 时 ， 其 在 样式 表 中 的 顺序 是 很 重要 的 ， 如 果 顺 序 不 当 ， 程序 员 可 能 无 法 达到 
希望 的 样式 。 它 们 的 正确 顺序 是 ，:hover 伪 类 必须 定义 在 :link 和 :visited 两 个 伪 类 之 后 ， 而 :actived 
伪 类 必须 在 :hover 之 后 。 为 了 方便 记忆 ， 可 以 采用 “ 爱 恨 原 则 ”, 即 “L(:link)oV(:visited)e, H(:hover) 
Al(:actived)te”。 
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2. 伪 元 素 选择 器 
伪 元 素 选择 器 是 用 来 改变 文档 中 特定 部 分 的 效果 样式 ， 而 这 一 部 分 是 通过 普通 的 选择 器 无 法 定义 


到 的 部 分 。CSS3 中 ， 常 用 的 有 以 下 4 种 伪 元 素 选择 器 。 


加 ”first-letter: 该 选择 器 对 应 的 CSS3 样式 对 指定 对 象 内 的 第 一 个 字符 起 作用 。 

回 :first-line: 该 选择 器 对 应 的 CSS3 样式 对 指定 对 象 内 的 第 一 行内 容 起 作用 。 

回 :before: 该 选择 器 与 内 容 相 关 的 属性 结合 使 用 ， 用 于 在 指定 对 象 内 部 的 前 端 插入 内 容 。 

回 :after: 该 选择 器 与 内 容 相 关 的 属性 结合 使 用 ， 用 于 在 指定 对 象 内 部 的 尾 端 添加 内 容 。 

例如 ， 下 面 代码 就 是 通过 伪 元 素 选择 器 向 页 面 中 添加 内 容 ， 并 且 修 改 类 名 为 txt 的 标签 中 第 一 行文 


字 以 及 <p> 标 签 第 一 个 字 的 样式 。 


01 .txt:first-line{ "设置 第 一 行文 本 的 样式 */ 

02 font-size: 35px; /设置 第 一 行 的 字体 ”/ 

03 height: 50px; 设置 第 一 行文 本 的 高 度 */ 

04 line-height: 50px; * 设 置 第 一 行 的 行 高 */ 

05 color: #000; /设置 第 一 行文 本 的 颜色 ”/ 

06 } 

07 pi:first-letter{ * 设 置 <p> 标 签 中 第 一 个 文字 的 样式 */ 

08 font-size: 30px; /设置 字体 大 小 

09 margin-left 20px; 六 设置 向 左 的 外 边 距 ?/ 

10 line-height: 30px; 让 设置 行 高 */ 

hy Jie 

12 .txt:after{ /在 类 名 为 txt 的 div 后 面 添 加 内 容 */ 

13 content: url("../img/phone1.png"); /添加 的 内 容 为 一 张 图 片 ，url 为 图 片 地 址 */ 

14 position: absolute; /设置 所 添加 图 片 的 定位 方式 

15 top: 75px; /设置 图 片 位 置 ， 相 对 于 类 名 为 cont 的 div 的 向 下 75 像素 */ 
16 left 777px; /* 设 置 图 片 位 置 ， 相 对 于 类 名 为 cont 的 div 的 向 右 777 像素 */ 
i 2 


例 4.03 ”结合 类 选择 器 、 伪 类 选择 器 , 以 及 伪 元 素 选择 器 实现 对 vivo X9s 手机 的 宣传 页 面 的 美化 ， 


有 具体 实现 步骤 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \04\4.03 ) 


面 


首先 在 HTML 页 面 中 添加 标签 以 及 文字 介绍 ， 并 且 添 加 超 链 接 。 由 于 这 里 的 超 链接 没有 跳 转 的 页 
所 以 链接 地 址 使 用 “#” 代 蔡 ， 具 体 代 码 如 下 。 


01 <divclass="cont"> 

02 <h1><a href="#">vivo X9s</a></h1> 

03 <div class="top"> 更 强大 的 分 屏 多 任务 3.0<br> 新 增 对 QQ 浏览 器 、 天 猫 等 应 用 的 分 屏 功能 ， 大 幅 增加 
了 可 以 一 屏 二 用 的 场景 ， 不 但 可 以 边 看 视频 边 回复 ， 更 可 以 一 边 聊天 一 边 购物 、 写 文档 、 回 邮件 、 


看 新 闻 。</div> 
04 </div> 
然后 新 建 一 个 CSS3 文件 ， 在 CSS3 文件 中 设置 页 面 的 大 小 、 外 边 矩 等 基本 布局 ， 具 体 代 码 如 下 。 
01 .cont{ A* 类 选择 器 设置 页 面 的 整体 大 小 以 及 背景 图 片 */ 
02 width: 1536px; /设置 整体 页 面 宽度 为 1536 像素 */ 
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03 height: 840px; 

04 margin: 0 auto; 

05 text-align: center; 
06 background: url("../img/bg.jpg"); 
07 } 

08 hi1{ 

09 padding-top: 80px; 
10 } 

11 .top{ 

Ps line-height: 30px; 
13 margin: 0 auto; 

14 text-align: center; 
15 width: 650px; 

16 font-size: 20px 
Ty 


/设置 页 面 整体 高 度 为 840 像素 */ 
/设置 页 面 外 边 距 上 下 为 0， 左 右 自 适 应 */ 
/文字 对 齐 方式 为 居中 对 齐 ” 

让 为 页 面 设置 背景 图 片 ”/ 


让 通过 标签 选择 器 选择 h1 标题 标签 */ 
”设置 向 上 的 内 边 距 */ 


"使 用 类 选择 器 ， 改 变 主 体内 容 的 样式 */ 
/* 类 选择 器 设置 行 高 为 30 像素 */ 

让 设置 主体 部 分 的 外 边 距 */ 

/设置 文字 的 对 齐 方式 为 居中 对 齐 % 
/设置 主体 部 分 的 宽度 为 650 像素 */ 

让 设置 文字 的 大 小 */ 


最 后 分 别 使 用 伪 元 素 选择 器 向 页 面 添 加 图 片 ， 以 及 设置 部 分 文字 的 样式 ， 具 体 代码 如 下 。 


.top:after{ 


content: url("../img/phone.png"); 


01 

02 

03 display: block; 

04 margin-top: 50px; 
05 } 

06 .top:first-line{ 

07 font-size: 30px; 

08 line-height: 90px; 
09 } 

10 a:link{ 

11 text-decoration: none; 
12 color: #000; 
1 

14 a:visited{ 

15 color: purple; 

16 } 

17 a:hover{ 

18 text-decoration: underline; 
19 color: #B49668; 
2000 

21 a:active{ 

22 color: red; 

23 text-decoration: none; 
24 } 


”在 类 名 为 top 的 div 后 面 添加 内 容 */ 

/* 添 加 的 内 容 为 1 张 图 片 ，url 为 图 片 地 址 */ 
让 设置 显示 方式 */ 

"设置 所 添加 内 容 的 向 上 的 外 边 距 */ 


/* 业 选择 器 中 第 一 行文 字 的 样式 
/设置 第 一 行文 字 的 字体 ”/ 
让 设置 第 一 行文 字 行 高 */ 


* 设 置 未 被 访问 的 超 链 接 的 样式 */ 
取消 其 默认 的 下 画 线 */ 
/设置 字体 颜色 为 黑色 


/设置 访问 后 的 超 链接 的 样式 % 
/设置 访问 后 的 超 链接 字体 为 紫色 % 


/设置 鼠标 停 在 超 链接 上 的 样式 
让 类 选择 器 设置 鼠标 滑 过 时 在 文字 下 方 出 现下 夯 线 */ 
让 设置 鼠标 悬 停 在 超 链接 上 时 的 字体 颜色 */ 


”设置 正在 单 击 的 超 链 接 的 样式 */ 
* 设 置 正在 被 单 击 的 超 链接 字体 颜色 */ 
让 取消 正在 被 单 击 的 超 链 接 的 下 画 线 */ 


编辑 完 代码 以 后 ， 在 浏览 器 中 运行 index.html 页 面 ， 可 以 查看 页 面 效果 如 图 4.8 所 示 。 在 运行 效果 


bh， 当 超 链 接 vivo X9s 分 别处 于 未 被 访问 、 鼠 标 悬 停 、 正 在 单 击 ， 


以 及 单 击 以 后 这 4 种 状态 时 的 文 


字 效 果 是 不 相同 的 ， 这 4 种 效果 都 是 通过 伪 类 选择 器 实现 的 。 而 文本 内 容 的 第 一 行文 字 的 字体 变 大 ， 
以 及 文本 下 方 的 图 片 都 是 通过 伪 元 素 选择 器 来 实现 。 
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vivo X9s 


更 强大 的 分 屏 多 任务 3. 0 


图 4.8 vivo X9s 手机 的 宣传 页 面 


4.2.4 其 他 选择 器 


在 CSS3 中 ， 除 了 上 面 所 介绍 的 选择 器 以 外 ， 还 有 很 多 其 他 的 选择 器 。 灵 活 运用 这 些 选 择 器 ， 可 
以 完成 一 些 意 想 不 到 的 页 面 效果 。 表 4.1 列举 了 一 些 其 他 的 选择 器 。 


表 4.1 CSS3 中 其 他 的 选择 器 


选择 器 类 型 说 了 明 
E 标签 选择 器 指定 该 CSS3 样式 对 所 有 下 标签 起 作用 
re 匹配 所 有 包含 在 三 标签 内 部 的 下 标签 。 注意, 和 下 不 仅仅 是 指 类 型 选 
择 器 ， 可 以 是 任意 合法 的 选择 器 组 合 
通 配 移 择 器 选择 文档 中 所 有 的 标签 
本 二 选择 匹配 三 的 标签 的 子 标签 中 的 下 标签 。 注意, 和 下 不 仅仅 是 指 类 型 
Ei 选择 器 ， 可 以 是 任意 合法 的 选择 符 组 合 
| 选择 匹配 与 下 的 标签 同 级 , 且 位 于 下 标签 后 面相 邻 位 置 的 F 标签 ,注意 
SR 相 邻 兄弟 选择 器 。 | E 和 下 不 仅仅 是 指 类 型 选择 器 ， 可 以 是 任意 合法 的 选择 符 组 合 
ee 匹配 所 有 与 E 同 级 且 位 于 下 后 面 的 所 有 下 标签。 注意， 这 里 的 同 级 是 指 
BD 通用 兄弟 标 等 选择 器 | 子 标签 和 兄弟 标签 的 父 标签 是 同一 个 标签 
Elang(f) | :lang0 伪 类 选择 器 ”| 选择 匹配 的 标签 ， 且 该 标签 显示 内 容 的 语言 类 型 为 人 
Efirstchild 。 | 结构 伪 类 选择 器 ”| 选择 匹配 的 标签 的 第 一 个 子 标签 
E:focus 用 户 操作 伪 类 选择 器 | 选择 匹配 的 标签 ， 且 匹配 标签 获取 了 焦点 


例 4.04 综合 使 用 选择 器 实现 下 面 的 商城 分 类 版 块 界面 ， 主 要 实现 步骤 如 下 。( 实例 位 置 : 资源 包 \ 
源码 \04\4.04 ) 
(1) 新 建 一 个 HTML 文件 ， 通 过 <ul> 标 签 和 <li> 标 签 添加 网 页 中 的 导航 文字 ， 并 且 通 过 <div> 标 
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签 实现 分 类 版 块 的 布局 和 样式 ， 关 键 代 码 如 下 。 


01 <nav class="mr-header > 
02 <ul> 

03 <li class="mr-li"> 你 好 ， 请 登录 </li> 
04 <li> 我 的 订单 </li> 

05 <li> 我 的 商城 </li> 

06 <li> 商 城 会 员 </li> 

07 <li> 企 业 采 购 </li> 

08 <Ii> 客 户 服务 </li> 

09 <li> 网 站 导航 < 川 > 

10 <Ii> 手 机 商城 </li> 

11 </ul> 

12 </nav> 


13 <div class="mr-content"> 

14 <div class="mr-block1"> 美 妆 会 场 </div> 
15 ”<div class="mr-block2"> 女 装 会 场 </div> 
16 <div class="mr-block3"> 男 装 会 场 </div> 
17 ”<div class="mr-block4"> 首 饰 会 场 </div> 
18 <div class="mr-block5"> 零 食 会 场 </div> 
19 ”<div class="mr-block6"> 家 居 会 场 </div> 
20 ”<div class="mr-block7"> 珠 宝 会 场 </div> 
21 <div class="mr-block8"> 电 子 会 场 </div> 
22 </div> 


(2) 新 建 一 个 CSS3 文件 ， 并 且 通 过 外 部 样式 引入 HTML 文件 ， 然 后 通过 类 选择 器 改变 导航 栏 背 
景 颜色 以 及 鼠标 滑 过 等 样式 ， 部 分 代码 如 下 。 


01 .mr-header{ A* 类 选择 器 ， 设 置 网 页 首部 导航 部 分 的 样式 */ 
02 height: 30px:; 让 设置 其 高 度 为 30 像素 */ 

03 width: 100%; 

04 background: #393f52; /设置 其 背景 颜色 

05 color white; /设置 字体 颜色 % 

06 


2» 
07 ”A* 类 选择 器 和 伪 类 选择 器 设置 鼠标 滑 过 无 序列 表 中 第 一 项 时 的 样式 */ 
08 .mr-liihover{ 


09 color: #F00; /设置 鼠标 滑 过 时 颜色 为 红色 %/ 
10 background: #393f52; /设置 鼠标 滑 过 时 的 背景 颜色 ?/ 
i 

12 navul{ 


13 width: 1560px: 
14 padding: 0 365px; 


1 

16 ullif 让 元 素 选 择 器 ， 设 置 无 序列 表 项 的 公共 样式 */ 
ue height: 28px:; * 设 置 无 序列 表 项 的 高 度 */ 

18 float: left; 每 一 项 都 向 左 浮动 */ 

19 line-height: 28px:; A* 设 置 行 高 ， 使 其 垂直 居中 显示 */ 

20 text-align: center:; 让 水 平 对 齐 方 式 为 居中 */ 

24 cursor: pointer; 鼠标 悬 停 时 ， 鼠 标 变 为 小 手 状 */ 

a font-size: 14px; * 设 置 字体 大 小 */ 
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23 } 

24 ul.mrli{ 让 类 选择 器 ， 设 置 无 序列 表 第 一 项 的 样式 */ 
25 margin-right: 390px; /右边 距 390 像素 */ 

26 float: left; /向 左 浮动 % 

人 


(3) 通过 使 用 伪 类 选择 器 和 通用 兄弟 标签 选择 器 ， 设 置 页 面 中 各 分 版 块 的 宽 高 以 及 鼠标 滑 过 的 样 
式 ， 关 键 代 码 如 下 。 


01 .mr-block1~div{ /通用 兄弟 元 素 选择 器 ， 设 置 出 第 一 个 以 外 的 其 他 版 块 的 样式 % 
02 height: 160px; 让 设置 其 高 度 为 160 像素 */ 

03 margin-left: 10px; /设置 左边 距 10 像素 */ 

04 line-height: 160px: 

05 } 

06 .mr-content .mr-block2 { 广 设 置 第 二 个 版 块 的 样式 */ 

07 width: 210px; /设置 宽度 为 210 像素 */ 

08 background: #7ed5c2; 设置 背景 颜色 */ 

[3 

10 .mr-content div:hover{ /* 伪 类 选择 器 ， 设 置 每 一 个 版 块 鼠标 滑 过 的 样式 
11 opacity: 0.5; ”设置 透明 度 */ 

12 color: #000; /设置 字体 颜色 


13 } 
完成 代码 编译 后 ， 在 浏览 器 中 运行 代码 ， 效 果 如 图 4.9 所 示 。 


珠宝 会 场 


图 4.9 商城 分 类 版 块 
od. 


明 
上 面 的 实例 省 略 了 CSS3 文件 中 部 分 设置 导航 文字 以 及 分 会 场 样式 的 代码 ， 实 例 的 详细 代码 请 
参照 资源 包 中 的 源码 。 


43 常用 属性 


本 节 将 对 CSS3 中 的 常用 属性 ， 包 括 文本 、 背 景 以 及 列表 的 相关 属性 进行 详细 介绍 。 在 浏览 网 页 
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时 ， 页 面 中 的 美观 大 方 的 图 片 、 整 齐 划 一 的 文字 等 都 是 通过 CSS3 中 的 这 些 属 性 改变 其 在 网 页 中 的 位 
置 、 背 景 以 及 文字 样式 而 实现 。 


4.3.1 文本 相关 属性 


本 节 主 要 介绍 CSS3 中 常用 的 文本 相关 属性 。 前 面 介绍 了 HTML 中 常用 的 文字 标签 以 及 设置 文本 
样式 的 基础 方法 。 而 这 些 样式 效果 使 用 CSS3 同样 可 以 实现 。 除 此 之 外 ， 文 本 的 对 齐 方式 、 文 本 的 换 
行 风 格 等 可 以 通过 CSS3 中 文本 相关 属性 来 设置 。 

(1) 设置 字体 属性 font-family， 语 法 如 下 。 

01 font-family: name1,[name2],[name3] 


name: 字体 的 名 称 ， 而 name2 和 name3 的 含义 类 似 于 “备用 字体 ”， 即 若 计算 机 中 含有 namel 字 
体 , 则 显示 为 namel 字体 ; 若 没有 namel 字体 , 则 显示 为 name2 字体 ; 若 计算 机 中 也 没有 name2 字体 ， 
则 显示 为 name3 字体 。 

例如 ， 下 面 代码 的 含义 为 : 设置 所 有 类 名 为 mrfontl 的 标签 中 文字 的 字体 为 宋体 ， 如 果 计 算 机 中 
没有 宋体 ， 则 将 文字 设置 为 黑体 ， 如 果 计算 机 中 也 没有 黑体 ， 就 设置 文字 为 楷体 。 

01 .mrfont1{ 

02 font-family: "宋体 "," 黑 体 "," 楷 体 "; 

03 


鹅 b 注 意 
输入 字体 名 称 时 ， 不 要 输入 中 文 (全 角 ) 的 双 引 号 ， 而 要 使 用 英文 (半角 ) 的 双 引 号 。 
(2) 设置 字号 属性 font-size， 语 法 如 下 。 
01 font-size: length 


length 指 字体 的 尺寸 ， 由 数字 和 长 度 单位 组 成 。 这 里 的 单位 可 以 是 相对 单位 也 可 以 是 绝对 单位 , 绝 
对 单位 不 会 随 着 显示 器 的 变化 而 变化 。 表 4.2 列举 了 常用 的 绝对 单位 。 


表 4.2 绝对 单位 及 其 含义 


长 度 单位 说 了 明 
in | inch: 英寸 
cm | Centimeter: 厘米 
mm | Millimeter: 毫米 
pt | point 印刷 的 点 数 ， 在 一 般 的 显示 器 中 1pt 相当 于 1/72inch 
pe pica: lpc= 12pt 


而 常见 的 相对 单位 有 px、em 和 ex， 下 面 将 逐一 介绍 各 相对 单位 的 用 法 。 

相对 长 度 单位 px。 

px 是 一 个 长 度 单位 ， 表 示 在 浏览 器 上 1 个 像素 的 大 小 。 因 为 不 同 访问 者 的 显示 器 的 分 辨 率 不 同 ， 
而 且 每 个 像素 的 实际 大 小 也 不 同 ， 所 以 px 被 称 为 相对 单位 ， 也 就 是 相对 于 1 个 像素 的 比例 。 
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回 ”绝对 长 度 单 位 em 和 ex。 
lem 表示 的 长 度 是 其 父 标 签 中 字母 m 的 标准 宽度 ，lex 则 表示 字母 x 的 标准 高 度 。 当 父 标 签 的 文 
字 大 小 变化 时 ， 使 用 这 两 个 单位 的 子 标签 的 大 小 会 同比 例 变化 。 在 文字 排版 时 ， 有 时 会 要 求 第 一 个 字 
母 比 其 他 字母 大 很 多 ， 并 下 沉 显 示 ， 就 可 以 使 用 这 个 单位 。 
(3) 设置 文字 颜色 属性 color， 语 法 如 下 。 


01 color: color 
color 指 的 是 具体 的 颜色 值 。 颜色 值 的 表示 方法 可 以 是 颜色 的 英文 单词 、 十 六 进 制 `RGB 或 者 HSL。 


文字 的 各 种 颜色 配合 其 他 页 面 标签 组 成 了 整个 五 彩 缤纷 的 页 面 。 在 CSS3 中 文字 颜色 是 通过 color 
属性 设置 的 。 例 如 ， 以 下 代码 都 表示 蓝 色 ， 在 浏览 器 中 都 可 以 正常 显示 。 例 如 : 


01 h3{color: blue;} /* 使 用 颜色 词 表 示 颜 色 */ 
02 h3{color: #0000ff;} 让 使 用 十 六 进 制 表示 颜色 */ 
03 h3{color: #00f,} /十 六 进 制 的 简写 ， 全 写 为 #O000ffP/ 


04 h3{color: rgb(0,0,255);} /分 别 给 出 红 、 绿 、 蓝 3 个 颜色 分 量 的 十 进 制 数值 ， 也 就 是 RGB 格式 */ 


/ 
NO 说明 
如 果 读 者 对 颜色 的 表示 方法 还 不 熟悉 , 或 者 希望 了 解 各 种 颜色 的 十 六 进 制 或 RGB 的 表示 方法 ， 
建议 在 互联 网 上 继续 检索 相关 信息 。 


(4) 设置 文字 的 水 平 对 齐 方式 属性 textralign， 语 法 如 下 。 
01 text-align: leftlcenter|rightljjustify 


回 left: 左 对 齐 。 

加 ”center: 居中 对 齐 。 

回 right， 右 对 齐 。 

回 justify: 两 端 对 齐 。 

(5) 设置 段 首 缩 进 属性 text-indent， 语 法 如 下 。 
01 text-indent: length 


length 就 是 由 百分比 数值 或 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 可 以 这 样 理解 ， 
text-indent 属性 定义 了 两 种 缩 进 方式 : 一 种 是 直接 定义 缩 进 的 长 度 ， 由 浮 点 数 和 单位 标识 符 组 合 表示 ; 
男 一 种 就 是 通过 百分比 定义 缩 进 。 

例 4.05 实现 设置 51 购 商 城 抢购 页 面 的 文字 样式 ， 实 现 步 又 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \ 
04\4.05 ) 

新 建 一 个 HIML 文件 ， 在 该 文件 中 ， 通 过 <div> 标 签 、<img> 标 签 以 及 <p> 标 签 添加 商品 抢购 页 面 
中 的 图 片 和 文字 ， 并 且 在 各 标签 中 设置 class 属性 ， 代 码 如 下 。 

01 <div class="mr-box"> 

02 <div class="mr-img"><img src="images/1.jpg"></div> 


03 <p class="mr-font1">HUAWEI<span>Mate</span><span>9</span><span>Pro</span></p> 
04 ”<p class="mr-font2"> 进 步 ， 再 进一步 </p> 
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<p class="mr-font3"> 每 周一 、 周 三 、 五 10:08 限量 抢购 </p> 
<p class="mr-font4"><span><font> ¥ </font>4699</span><span><font> ¥ </font>5299</span></p> 
<p class="mr-buy"> 立 即 购买 </p> 

</div> 


通过 使 用 类 选择 器 改变 网 页 中 图 片 和 文字 的 样式 ， 部 分 代码 如 下 。 


01 
02 
03 
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.mr-img { 
width: 405px; 人 ”通过 设置 图 片 宽度 改变 图 片 的 大 小 */ 
float: left; ”设置 浮动 为 向 左 浮动 */ 
margin: 42px; /设置 图 片 的 外 边 距 ， 距 离 上 、 右 、 下 、 左 都 为 42 像素 */ 
.mr-font1 { 
width: 610px; 
float: left; ”设置 浮动 为 左 浮动 */ 
font-size: 60px:; 让 设置 字体 大 小 为 60 像素 */ 
font-weight: bolder; ”设置 文字 加 粗 */ 
text-align: center; ”设置 对 齐 方 式 为 居中 对 齐 */ 
i 
.mr-font2 { 
float: left; 
margin-left: 130px; 
font-size: 41px; 
margin-top: -64px; 
} 
完成 代码 编辑 后 ， 在 浏览 器 中 运行 代码 ， 效 果 如 图 4.10 所 示 。 
二 [一 :一 | 
[a x 芭 汪 和 和 Fo 
C | © file///C/Users/Administrator/Desktop/ 笃 9 意 文 例 /9-1/9-1html | 


HUAWEI Mate 9 Pro 
进步 , 再 进一步 


每 周一 、 周 三 、 五 10;08 限 量 抢购 


.4699 .5299 


图 4.10 商品 抢购 页 面 
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/ 
6 培 明 
在 上 面 的 代码 中 ， 为 了 控制 页 面 布 局 和 字体 的 样式 ， 应 用 了 CSS3 样式 ， 应 用 的 CSS3 样式 表 
文件 的 具体 代码 请 参见 资源 包 中 的 源码 。 


4.3.2 背景 相关 属性 


背景 属性 是 给 网 页 添加 背景 色 或 者 背景 图 所 用 的 CSS3 样式 中 的 属性 ， 它 的 能 力 远 远 超 于 HTML。 
通常 ， 我 们 给 网 页 添加 背景 主要 运用 到 以 下 几 个 属性 。 

(1) 添加 背景 颜色 属性 background-color， 语 法 如 下 。 

01 _ background-color:colorltransparent 


回 color: color 设置 背景 的 颜色 。 它 可 以 采用 英文 单词 、 十 六 进 制 、RGB、HSL、HSLA 和 RGBA 
等 表示 方法 。 
回 ” transparent: 表示 背景 颜色 透明 。 
(2) 添加 HTML 中 标签 的 背景 图 片 background-image。 这 与 HTML 中 插入 图 片 不 同 ， 背 景 图 像 
放 在 网 页 的 最 底层 ， 文 字 和 图 片 等 都 位 于 其 上 ， 语 法 如 下 。 
01 background-image:url() 
url 为 图 片 的 地 址 ， 可 以 是 相对 地 址 也 可 以 是 绝对 地 址 。 
(3) 设置 图 像 的 平 铺 方 式 background-repeat， 语 法 如 下 。 
01 _ background-repeat:inheritlno-repeatlrepeatlrepeat-x|repeat-y 


在 CSS3 样式 中 ，background-repeat 属性 包含 5 个 属性 值 ， 表 4.3 列举 出 各 属性 值 的 含义 。 
表 4.3 background-repeat 的 属性 值 的 解释 


属 性 值 含义 
inherit 从 父 标签 继承 background-repeat 属性 的 设置 
no-repeat 背景 图 像 只 显示 一 次 ， 不 重复 
repeat 在 水 平和 垂直 方向 上 重复 显示 背景 图 像 
Tepeat-x | 只 沿 义 轴 方 向 重复 显示 背景 


Tepeat-y 只 沿 立 轴 方 向 重复 显示 背 
(4) 设置 背景 图 像 是 否 随 页 面 中 的 内 容 滚动 background-attachment， 语 法 如 下 。 
01 background-attachment:scrolllfixed 
回 scroll， 当 页 面 滚动 时 ， 背 景 图 像 跟 着 页 面 一 起 滚动 。 
回 fixed: 将 背景 图 像 固定 在 页 面 的 可 见 区 域 。 
(5) 设 定 背 景 图 像 在 页 面 中 的 位 置 background-position， 语 法 如 下 。 
01 _ background-position:length|percentage|top|centerlbottomlleftlright 
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在 CSS3 样式 中 ，background-position 属性 包含 7 个 属性 值 ， 表 4.4 列举 出 各 属性 值 的 含义 。 


表 4.4 background-position 的 属性 值 的 解释 


属 性 值 全 ”六 
length 设置 背景 图 像 与 页 面 边 距 水 平 何 和 垂直 方向 的 距离 ， 单 位 为 cm、mm、px 等 
percentage 根据 页 面 标签 框 的 宽度 和 高 度 的 百分比 放置 背景 图 像 
top 设置 背景 图 像 项 部 居中 显示 
center 设置 背景 图 像 居 中 显示 
bottom 设置 背景 图 像 底部 居中 显示 
left 设置 背景 图 像 左 部 居中 显示 
right 设置 背景 图 像 右 部 居中 显示 
SC 
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当 需 要 为 背景 设置 多 个 属性 时 ， 可 以 将 属性 写 为 background， 然 后 将 各 属性 值 写 在 一 行 ， 并 且 
以 空格 间隔 。 例 如 ， 下 面 的 CSS3 代码 。 


.mr-cont{ 


background-image: url(../img/bg.jpg); 
background-position: left top; 
background-repeat: no-repeat; 


} 


上 面 代码 分 别 定义 了 背景 图 像 、 背 景 图 像 的 位 置 和 重复 方式 , 但 是 代码 比较 多 , 为 了 简化 代码 ， 
也 可 以 写成 下 面 的 形式 。 


01 
02 
03 


.mr-cont{ 


background: url(../img/bg.jpg) left top no-repeat; 


} 


例 4.06 为 51 购 商 城 的 登录 界面 设置 一 张 背景 图 片 , 并且 设 置 背景 图 片 的 位 置 、 重 复方 式 以 及 背 
景 颜色 ， 其 关键 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \04\4.06 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 


.bg{ 
width: 1000px: 
height: 465px; 
margin: 0 auto; 


background-image: url("../images/1.jpg"); 
background-position: 10px top; 


让 设置 宽度 为 1000 像素 */ 
/设置 高 度 为 465 像素 */ 
让 设置 外 边 距 ， 上 下 外 边 距 为 0， 左 右 外 边 距 为 默认 外 边 距 */ 


/设置 背景 图 片 的 位 置 % 


background-repeat: no-repeat:; /设置 背景 图 片 的 重复 方式 为 不 重复 */ 
background-color: 打 d7a72; 广 设置 背景 颜色 */ 
border: 2px solid red; /* 设 置 边框 宽度 为 2 像素 ， 线 型 为 实 线 ， 颜 色 为 红色 */ 


} 


完成 代码 编辑 后 ， 在 浏览 器 中 运行 代码 ， 效 果 如 图 4.11 所 示 。 
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图 4.11 为 登录 界面 设置 背景 图 片 


| 上 面 的 代码 片段 仅 实现 为 网 页 插入 背景 图 片 ， 本 实例 实现 登录 界面 的 具体 代码 请 参照 资源 包 中 
“的 源码 。 | 


4.3.3 列表 相关 属性 


HTML 语言 中 提供 了 列表 标记 ， 通 过 列表 标记 可 以 将 文字 或 其 他 HTML 元 素 以 列表 的 形式 依次 排 
列 。 为 了 更 好 地 控制 列表 的 样式 ，CSS3 提供 了 一 些 属性 ， 通 过 这 些 属 性 可 以 设置 列表 的 项 目 符号 的 种 
类 、 图 片 以 及 排列 位 置 等 。 下 面 仅 列举 列表 中 常用 的 CSS3 属性 。 

list-style: 简写 属性 。 用 于 把 所 有 用 于 列表 的 属性 设置 于 一 个 声明 中 。 

回 list-style-image: 将 图 像 设置 为 列表 项 标志 。 

list-style-position: 将 列表 中 列表 项 标志 的 位 置 。 

list-style-type: 设置 列表 项 标志 的 类 型 。 

例 4.07 实现 购物 商城 的 导航 栏 ， 并 且 使 用 CSS3 中 的 相关 列表 属性 添加 列表 项 的 项 目 图 标 以 及 
美化 页 面 ， 具 体 实现 步 又 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \04\4.07 ) 

首先 ， 建 立 一 个 HTML 文件 ， 在 HTML 文件 中 添加 无 序列 表 标签 ， 并 且 添 加 内 容 ， 具 体 代码 如 下 。 


01 <div class="cont"> 
02 <div class="top"> 


03 <ul> 
04 <Ii> 商 品 分 类 </li> 
05 <Ii 记 春节 特卖 </li> 
06 <I 记 会 员 特 价 </li> 
07 <li> 鲜 果 时 光 </li> 
08 <li> 机 友 必 看 </li> 


qd 
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</ul> 
</div> 
<div class="bottom"> 
<ul> 
<li> 女 装 /内 衣 </li> 
<Ii> 男 装 /户外 </li> 
<li> 女 鞋 / 男 鞋 </li> 
<li> 手 表 /饰品 </li> 
<li> 美 妆 / 家 居 </li> 
<li> 零 食 /鲜果 </li> 
<Ii> 电 器 /手机 </li> 
</ul> 
</div> 
</div> 


然后 ,建立 一 个 CSS3 文件 ,在 CSS3 文件 中 先 设置 页 面 整体 的 大 小 以 及 布局 ,然后 分 别 设置 横向 
导航 栏 以 及 侧 边 导航 栏 大 小 等 样式 ， 具 体 代码 如 下 。 


{ 
margin: 0; 
padding: 0; 


.cont{ 
height: 400px; 
width: 800px; 
margin: 0 auto; 
background: url("../img/bg.jpg") no-repeat; 
background-size: 100% 100%; 


‘top{ 
height: 30px; 
background: #ff0000; 
text-align: left; 


} 

.bottom{ 
width: 210px; 
text-align: left; 
margin-left: 10px; 


/* 通 配 选 择 器 ， 选 中 页 面 中 所 有 标签 % 
/清除 页 面 中 所 有 标签 的 外 边 距 %/ 
/清除 页 面 中 所 有 标签 的 内 边 距 % 


让 类 选择 器 设置 页 面 的 整体 样式 */ 
* 设 置 页 面 的 整体 高 度 */ 

让 设置 页 面 的 整体 宽度 */ 

”使 内 容 在 页 面 中 左右 自 适应 */ 
”设置 背景 图 片 以 及 重复 方式 */ 
让 设置 背景 图 片 的 尺寸 ”/ 


/设置 上 方 导航 栏 的 样式 ” 
让 设置 导航 栏 高 度 */ 

让 设置 导航 栏 背景 颜色 */ 
/设置 列表 对 齐 方式 


人 * 设 置 侧 边 导航 栏 的 样式 */ 
/设置 侧 边 导航 栏 的 宽度 % 
/* 设 置 侧 边 导航 的 对 齐 方式 % 
让 设置 向 左 的 外 边 距 */ 


最 后 ， 分 别 设置 两 个 导航 栏 中 列表 项 的 样式 ， 具 体 代 码 如 下 。 


01 
02 
03 
04 
05 
06 
07 
08 


.top ul>:first-child{ 
width: 250px; 


} 

top ul Iif{ 
text-align: center; 
width: 130px; 
list-style-type: none; 
float: left:; 


"单独 设置 导航 栏 中 第 一 项 的 样式 */ 
/设置 导航 栏 中 第 一 项 的 宽度 


/设置 导航 栏 中 其 他 列表 项 的 样式 
/文字 的 对 齐 方 式 */ 

让 其 他 列表 项 的 宽度 */ 

让 设置 列表 项 的 项 目 符号 的 类 型 */ 
让 设置 列表 项 的 浮动 方式 */ 
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09 line-height: 30px; /设置 行 高 7 
10 
11 .bottom ul /设置 侧 边 导航 的 列表 项 的 样式 % 
12 text-align: center; /设置 列表 项 中 文字 的 对 齐 方式 
13 height: 40px; 户 设 置 列表 项 的 高 度 */ 
14 list-style-image: url("../img/list1.png"); 六 设置 列表 项 的 图 标 / 
15 list-style-position: inside; 让 设置 列表 项 际 的 位 置 */ 
16 border-radius: 10px; 设置 列表 项 的 圆 角 边框 */ 
ke margin-top: 5px; 让 设置 列表 项 的 向 上 的 外 边 距 */ 
18 border 1px dashed red; 让 设置 边框 样式 */ 
19 于 
20 .bottom ul li:hover{ /设置 当 鼠 标 滑 过 列表 项 的 样式 %/ 
21 list-style-image: url("../imgl/list2.png"); * 设 置 列表 项 的 项 目 符号 */ 
22 background: rgba(255,255,255,0.5); 让 设置 背景 颜色 */ 


233] 


编辑 完 代码 以 后 。 在 浏览 器 中 运行 HTML 文件 ， 观 看 页 面 效果 如 图 4.12 所 示 。 


4.12 ”实现 购物 商城 导航 栏 


44 小 结 


本 章 重 点 讲解 CSS3 的 基本 应 用 ， 主 要 包括 CSS3 中 常用 的 选择 器 、 常 用 属性 。 其 中 通过 选择 器 绑 
定 标签 可 以 实现 对 标签 的 样式 控制 ， 常 用 属性 可 以 实现 网 页 中 的 文字 、 背 景 等 样式 设置 。 学 完 本 章 ， 
可 以 完成 对 网 页 的 基本 布局 以 及 样式 控制 。 由 于 本 章 内 容 较 多 ， 希 望 读者 学 习 时 勤 加 练习 。 


4.5.1 实战 一 : 制作 登录 注册 页 面 


当 我 们 浏览 一 些 网 站 时 ， 网 页 中 通常 会 需要 注册 或 登录 ， 试 着 编辑 一 个 注册 /登录 页 面 ， 并 且 通 过 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 
CSS3 美化 页 面 。( 资源 包 \ 源 码 \04\ 实 战 \01 ) 
4.5.2 ”实战 二 : 制作 网 页 版 生日 贺 


小 王 生日 快 到 了 ， 请 帮忙 为 他 制作 一 份 网 页 版 生日 贺卡 。( 资源 包 \ 源 码 \04\ 实 战 \02 ) 


4.5.3 ”实战 三 : 实现 个 人 主页 


尝试 编写 一 个 自己 的 空间 主页 并 且 通 过 CSS3 美化 自己 的 主页 。( 资源 包 \ 源 码 \04\ 实 战 \03 ) 
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时 

CSS3 高 级 应 用 

( 名 ' 视频 讲解 :1 小 时 3 分 钟 ) 


本 章 主要 为 C553 的 高 级 应 用 ， 主 要 向 读者 介绍 了 布局 和 动画 的 相关 应 用 。 如 
果 一 个 页 面 的 布局 一 团 粮 ， 那 么 无 论 动态 将 效 多 么 迷 酷 ， 也 无 法 博 人 眼球 。 所 以 布 
局 是 C553 中 相当 重要 的 一 点 , 而 想 要 在 C553 中 将 布局 应 用 的 得 心 应 手 , 就 必须 理 
解 一 个 重要 的 概念 一 一 枉 模 型 。 动 画 与 将 效 是 C553 中 的 一 个 新 属性 ， 使 用 它 可 以 
制作 许多 网 页 中 的 将 效 ,为 网 页 增加 亮点 。 所 以 本 章 首 先 向 读者 介绍 框 模 型 的 概念， 
然后 在 理解 了 框 模型 的 基础 上 对 页 面 进 行 布局 ， 最 后 为 用 户 介 绍 了 C553 中 动画 与 
特效 的 制作 方法 。 

学 习 摘 要 : 


Hi 框 模型 
MW 布局 常用 属性 
MW 动画 与 特效 
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5.1 框 模 型 


框 模型 (Box Model， 也 译作 “ 盒 模型 >) 是 CSS3 非常 重要 的 概念 ， 也 是 比较 抽象 的 概念 。 文 档 
树 中 的 元 素 都 产生 矩形 的 框 (Box)， 这 些 框 影响 了 元 素 内 容 之 间 的 距离 、 元 素 内 容 的 位 置 、 背 景 图 片 
的 位 置 等 。 而 浏览 器 根据 视觉 格式 化 模型 〈Visual Formatting Model) 来 将 这 些 框 布局 成 访问 者 看 到 的 
样子 。CSS3 框 模型 (Box Model) 规定 了 元 素 框 处 理 元 素 内容 、 内 边 距 、 边 框 和 外 边 距 的 方式 。 

图 5.1 就 是 框 模 型 的 一 个 示意 图 ， 在 这 个 图 中 ,可 以 看 到 , 元素 框 的 最 内 部 分 是 实际 的 内 容 ， 它 有 
width《〈 宽 度 ) 和 height (高度) 两 个 基本 属性 ， 第 4 章 的 实例 中 经 常用 到 这 两 个 属性 ， 这 里 就 不 再 过 
多 解释 。 直 接 包围 内 容 的 是 内 边 距 。 内 边 距 呈 现 了 元 素 的 背景 ， 它 的 边缘 是 边框 。 边 框 以 外 是 外 边 距 ， 
外 边 距 默认 是 透明 的 ， 因 此 不 会 遮挡 其 后 的 任何 元 素 。 


padd ing-top 


全 
3 
员 
Ee 
只 轿 
Eg 
G3 


padding-bottom 


图 5.1 框 模型 


SC 

如 果 没有 为 元 素 设 定 属性 ， 它 们 的 值 就 是 auto 关键 字 ，auto 关键 字 会 根据 元 素 的 类 型 ， 自 动 调 
” 整 其 大 小 。 例 如 ， 当 我 们 设置 <div> 元 素 的 宽 高 为 auto 时 ， 其 宽度 将 横 跨 所 有 的 可 用 空间 ， 而 高 度 
“” 则 是 能 够 容纳 元 素 内 部 所 有 内 容 的 最 小 高 度 。 


lle 


5.1.1 外 边 距 margin 


外 边 距 也 就 是 对 象 与 对 象 之 间 的 距离 ， 它 主要 由 4 部 分 组 成 ， 分 别 是 margin-top (上 外 边 距 )、 
margin-right〔 右 外 边 距 )、margin-bottom〔 下 外 边 距 )、margin-left( 左 外 边 距 )。 这 4 部 分 既 可 以 单独 
只 设置 其 中 一 个 属性 ， 也 可 以 使 用 margin 将 4 个 属性 一 起 设置 。 当 只 需要 单独 设置 某 一 个 外 边 距 时 ， 
以 上 边 距 为 例 ， 语 法 如 下 。 

01 margin-top:<length>| auto |; 

auto: 表示 默认 的 外 边 距 。 

length: 使 用 百分比 或 者 长 度数 值 表示 上 边 距 。 


? 
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如 果 需 要 同时 设置 上 、 下 、 左 、 右 4 个 外 边 距 的 值 ， 可 以 通过 margin 属性 简写 ， 简 写 时 有 4 种 表 
达 方 式 ， 下 面 一 一 讲解 。 

1. 只 设置 一 个 外 边 距 的 值 

当 margin 只 有 一 个 属性 值 时 ， 语 法 如 下 。 

01 margin: 5px; 

上 面 语法 中 的 5px 表示 上 、 下 、 左 、 右 这 4 个 外 边 距 的 值 都 为 5 像素 。 相 当 于 下 面 的 表达 方式 。 

01 margin-top: 5px; 

02 margin-right: 5px; 

03 margin-bottom: 5px; 

04 margin-left: 5px; 

2. 设置 两 个 外 边 距 的 值 

当 margin 有 两 个 属性 值 时 ， 语 法 如 下 。 

01 margin: 5px 10px; 

上 面 的 语法 中 ， 两 个 属性 值 以 空格 间隔 开 ， 其 含义 为 该 元 素 的 上 下 外 边 距 为 5 像素 ， 左 右 外 边 距 
为 10 像素 。 相 当 于 下 面 的 表达 方式 。 

01 margin-top: 5px; 

02 margin-right: 10px; 

03 margin-bottom: 5px; 

04 margin-left: 10px; 

3. 设置 3 个 外 边 距 的 值 

当 margin 有 3 个 属性 值 时 ， 语 法 如 下 。 

01 margin: 5px 10px 15px; 

上 面 的 语法 中 ,3 个 属性 值 同样 以 空格 间隔 开 ， 其 含义 为 该 元 素 的 上 外 边 距 为 5 像素 , 左右 外 边 距 
为 10 像素 ， 下 外 边 距 为 15 像素 。 相 当 于 下 面 的 表达 方式 。 


01 margin-top: 5px; 

02 margin-right: 15px; 
03 margin-bottom: 10px; 
04 margin-left: 15px; 


4. 设置 4 个 外 边 距 的 值 

当 margin 有 4 个 属性 值 时 ， 语 法 如 下 。 

01 margin: 5px 10px 15px 20px; 

当 margin 有 4 个 属性 值 时 ， 它 表示 从 顶端 开 始 ， 按 照 顺 时 针 的 顺序 ， 依 次 描述 各 外 边 距 的 值 ， 也 
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就 是 依次 设置 上 、 右 、 下 、 左 4 个 外 边 距 的 值 。 相 当 于 下 面 的 表达 方式 。 
01 margin-top: 5px; 
02 margin-right: 10px; 
03 margin-bottom: 15px; 
04 margin-left: 20px; 


例 5.01 实现 制作 手机 宣传 页 面 , 首先 需要 在 HTML 页 面 中 添加 页 面 的 基本 内 容 , 然后 通过 CSS3 
对 页 面 中 的 内 容 进行 美化 和 布局 。 在 HTML 页 面 中 添加 内 容 的 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 


码 \0S\S.01 ) 
01 <divclass="cont"> 
02 <dl> 
03 <dt> 儿 童 模 式 </dt> 
04 <dd> 日 常生 活 中 不 可 避免 的 会 有 小 孩 喜欢 玩 大 人 手机 的 情况 , X9s/X9s Plus 的 儿童 模式 为 家 长 提供 
了 贴心 的 解决 方案 ， 减 少儿 童 使 用 手机 的 担忧 和 困扰 。</dd> 
05 </dl> 
06 <div><img src="img/phone1.png" alt="> </div> 
07 </div> 


在 CSS3 页 面 中 ， 首 先 清除 元 素 默 认 的 内 外 边 距 ， 然 后 重新 设置 文字 以 及 图 片 等 样式 ， 具 体 代码 
如 下 。 


01 对 

02 padding: 0; 

03 margin: 0 

040} 

05 .cont{ 让 类 选择 器 设置 页 面 的 整体 样式 */ 
06 width: 1388px; /* 设 置 整 体 页 面 宽 度 为 1388 像素 */ 
07 height: 840px; /设置 页 面 整体 高 度 为 840 像素 */ 
08 margin: 0 auto; 设置 页 面 外 边 距 上 下 为 0， 左 右 自 适 应 */ 
09 background: url("../img/bg1.jpg"); /* 为 页 面 设置 背景 图 片 */ 

10. 于 

11 dl /设置 文本 部 分 的 样式 % 

12 margin: 320px 0px 0 300px:; 让 设置 文本 部 分 的 外 边 距 */ 

3 

14 dl,.cont div{ 广 设 置 文本 和 图 片 的 样式 */ 

15 float: left; 让 设置 其 浮动 方式 ， 使 它们 在 一 行 显示 */ 
16 } 

17 dldt{ ”设置 文本 标题 的 样式 */ 

18 font-size: 35px; 让 设置 字体 的 大 小 */ 

19 height: 50px; 让 设置 高 度 */ 

20 line-height: 50px; 让 设置 行 高 */ 

21 color: #000; /设置 字体 颜色 

22° 3} 

23 dldd{ "设置 文本 内 容 的 样式 */ 

24 width: 284px; /设置 文本 的 宽度 

25 font-size: 18px; /设置 字体 大 小 六 

26 line-height: 25px: * 设 置 文本 的 行 间 距 */ 
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} 


.cont div{ 户 设 置 图 片 部 分 的 样式 */ 
margin: 40px Opx Opx 103px:; 户 添加 外 边 距 */ 


} 


编辑 完 代码 以 后 ， 在 浏览 器 中 运行 HTML 文件 ， 运 行 效果 如 图 5.2 所 示 。 


S22 


5.2 实现 vivo X9s Plus 手机 宣传 页 面 


内 边 距 padding 


内 边 距 也 就 是 对 象 的 内 容 与 对 象 边框 之 间 的 距离 ， 它 可 以 通过 padding 属性 进行 设置 。 它 
padding-top、padding-right、paddin-bottom 以 及 padding-left 这 4 个 属性 值 ， 当 然 ， 设 置 内 边 距 
与 设置 外 边 距 的 方法 相同 ， 既 可 以 单独 设置 某 个 方向 的 内 边 距 ， 也 可 以 简写 ， 从 而 设置 多 个 方 
边 距 ， 此 处 不 再 重复 讲解 。 

例 5.02 实现 手机 商城 中 ， 新 品 专区 的 商品 页 面 ， 需 要 合理 的 结合 使 用 外 边 距 margin 和 


padding 以 改变 文字 ,以 及 图 片 在 网 页 


同样 有 
的 方法 
向 的 内 


内 边 距 


bh 的 位 置 , 具体 实现 步骤 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \05\5.02 ) 


在 HTML 页 面 中 ， 通 过 定义 列表 以 及 <h1> 标 题 标 签 添加 页 面 中 的 文字 和 图 片 ， 具 体 代码 如 下 。 


01 


<div class="cont"> 
<h1> 新 品 专区 </h1> 
<div class="bottom"> 
<dl> 
<dt><img src="img/phone1.jpg" alt=""> </dt> 
<dd>X9s 活力 蓝 </dd> 
<dd> 活 力 蓝 新 配色 ， 预 定好 礼 </dd> 
<dd> ¥ 2698</dd> 
</dl> 
<dl> 
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| <dt><img src="img/phone2.jpg" alt=""> </dt> 
12 <dd>X9s 活力 蓝 </dd> 

13 <dd> 活 力 蓝 新 配色 ， 预 定好 礼 </dd> 

14 <dd> ¥ 2698</dd> 

15 </dl> 

16 <dl> 

17 <dt><img src="img/phone3.png" alt=""> </dt> 
18 <dd>X9s plus 全 网 通 </dd> 

19 <dd> 耳 返 K 歌 ， 护 眼 模式 </dd> 

20 <dd> ¥ 2998</dd> 

21 </dl> 

22 </div> 

23 </div> 


在 CSS3 页 面 中 ， 设 置 页 面 的 整体 样式 ， 并 且 通 过 外 边 距 调整 定义 列表 之 间 的 距离 和 内 边 距 调整 
商品 信息 中 的 文字 ， 再 定义 列表 中 的 位 置 ， 具 体 代码 如 下 。 


01 所 
02 padding: 0; 

03 margin: 0 

04 } 

05 .cont{ ”设置 页 面 的 整体 样式 */ 
06 width: 1200px; 让 设置 页 面 的 整体 宽度 */ 
07 height: 620px; 让 设置 页 面 的 整体 高 度 */ 
08 margin: 0 auto; 设置 页 面 的 整体 外 边 距 */ 
09 background: rgb(220,255,255); /设置 整体 的 背景 颜色 %/ 
0 

11 hi1{ 让 设置 标题 样式 */ 

12 padding: 30px 50px 30px 525px; /设置 标题 文字 的 内 边 距 ?/ 
M3 

14 .bottom{ /设置 手机 部 分 的 整体 样式 
15 height: 500px; 让 设置 其 高 度 */ 

16 } 

17 dl 让 设置 手机 部 分 的 样式 */ 
18 float: left; 让 设置 浮动 为 左 浮动 */ 

19 height: 511px; 让 设置 高 度 */ 

20 width: 394px; 让 设置 宽度 */ 

a | margin-left: 4px; 

22 background: #fff: 让 设置 背景 颜色 */ 

3> 

24 dd{ 让 设置 文字 介绍 部 分 的 样式 */ 
25 border: 1px dashed #fOf; 让 添加 边框 样式 */ 

26 border-radius: 10px; 让 设置 圆 角 边 框 */ 

这 下 padding: 10px 90px; /设置 文字 的 内 边 距 % 

28 margin: 5px; /设置 文字 的 外 边 距 % 

9 

30 img{ 

31 width: 250px; 让 设置 图 片 大 小 */ 

32 padding: 50px 65px; 广 设 置 图 片 的 内 边 距 */ 

3 } 
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编辑 完 代码 以 后 ， 在 浏览 器 中 运行 HTML 文件 ， 可 以 看 到 运行 效果 如 图 5.3 所 示 。 


新 品 专区 
全 硬 二 二 人 ~ 
| SS | L a 
90 活力 六 : ge 活力 55 plus 全 网 通 
活力 芹 可 色 ， 预定 村 礼 话 力 生 耻 色 ,预定 时 访 环球 ， 护 呆 民 式 
sm8 #298 2 


图 5.3 商品 专区 商品 页 面 


注意 , 
与 外 边 距 不 同 的 是 ， 关 键 字 auto 对 padding 属性 是 不 起 作用 的 ， 另 外 ，padding 属性 不 接受 负 
值 ， 而 margin 可 以 。 


mn 


5.1.3 边框 border 


边框 的 属性 ， 主 要 通过 设置 边框 颜色 〈border-color)、 边 框 宽 度 (border-width ) 以 及 边框 样式 
(border-style) 来 完成 。 


1. 边框 的 颜色 属性 border-color 


设置 边框 的 颜色 需要 使 用 border-color 属性 来 实现 。 可 以 将 4 条 边 设置 为 相同 的 颜色 ， 也 可 以 设置 
为 不 同 的 颜色 。 当 设置 元 素 的 边框 为 相同 颜色 时 ， 语 法 格式 如 下 。 

01 border-color: color; 

该 属性 的 属性 值 为 颜色 名 称 或 是 表示 颜色 的 RGB 值 。 例如， 红色 可 以 用 red 表示 ， 也 可 以 用 
#FF0000、#f00 或 rgb(255,0,0) 表 示 。 建 议 使 用 加 rggbb、 扫 gb、rgb0 等 表示 的 RGB 值 。 

当然 ， 如 果 为 不 同 的 边框 设置 不 同 的 颜色 值 ， 其 语法 与 外 边 距 的 语法 类 似 。 这 里 仅 列举 有 4 个 边 
框 的 颜色 值 时 的 用 法 ， 如 下 所 示 。 


01 border-color: #00 #0f0 #00f 各 作 
上 面 这 行 代码 依次 设置 了 上 、 右 、 下 以 及 左边 框 的 颜色 ， 这 行 代码 也 可 以 写成 下 面 这 种 形式 。 


01 border-top-color: #f00; 
02 border-right-color: #0f0; 
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03 border-bottom-color: #00f; 
04 border-left-color: #0ff: 


2. 边框 样式 属性 border-style 
边框 的 样式 属性 主要 用 来 设置 边框 的 样式 ， 语 法 格式 如 下 。 
01 borderstyle: dashedldottedldoublelgroovelhiddenlinsetloutsetiridgelsolidlnone: 
border-style 属性 的 属性 值 及 含义 如 表 5.1 所 示 。 
表 5.1 border-style 属性 的 属性 值 及 含义 


属 性 值 含义 
dashed 边框 样式 为 虚线 
dotted 边框 样式 为 点 线 
double 边框 样式 为 双 线 
groove 边框 样式 为 3D 凹 覃 
hidden 隐藏 边框 
inset 设置 线条 样式 为 3D 凹 边 
outset 设置 线条 样式 为 3D 凸 边 
ridge 设置 线条 样式 为 蓉 形 边框 
solid 设置 线条 样式 为 实 线 
none 没有 边框 


例如 ， 图 5.4 展示 了 部 分 线条 样式 。 


lborder-style: dashed dotted double groove; 


图 5.4 部 分 线条 样式 的 示意 图 
/ 
NO 说 明 
虽然 表 5.1 列举 了 多 种 线条 样式 ， 但 是 部 分 线条 样式 目前 浏览 器 还 不 支持 ， 当 浏览 器 不 支持 该 
线条 样式 时 ， 就 会 将 线条 样式 显示 为 实 线 。 


3. 边框 的 宽度 属性 border-width 

设置 边框 宽度 主要 依赖 border-width 属性 ， 其 语法 结构 如 下 。 
01 border-width: mediumlthinlthickllength 

medium: 默认 边框 宽度 。 

thin: 比 默认 边框 宽度 窄 。 

thick: 比 默认 边框 宽度 宽 。 

length: 指定 具体 的 线条 的 宽度 。 


办 多 


第 5 章 CSS3 高 级 应 用 


全 o 注 总 
border-color 属性 只 有 在 设置 了 border-style 属性 ， 并 且 border-style 属性 值 不 为 hnone， 而 且 

border-width 属性 值 不 为 0 像素 时 ， 边 框 才 有 效 ， 否 则 不 显示 边框 。 | 

当然 ， 除 了 前 面 这 样 单独 设置 线条 的 颜色 、 样 式 和 宽度 以 外 ， 还 可 以 通过 border 属性 综合 设置 线 
条 所 有 属性 。 综 合 设置 其 属性 时 ， 语 法 如 下 。 

01 border: border-width border-style border-color; 

在 上 面 的 语法 中 ， 各 属性 之 间 以 空格 间隔 并 且 无 顺序 性 ， 但 是 ， 要 特别 注意 ， 这 种 方法 所 定义 的 
是 元 素 的 4 条 边框 的 统一 样式 ， 如 果 要 单独 设置 某 条 边框 的 样式 ， 以 上 边框 为 例 ， 语 法 如 下 。 

01 border-top: border-width border-style border-color; 

例 5.03 本 实例 为 综合 实例 ， 通 过 运用 CSS3 中 浮动 、 内 外 边 距 以 及 边框 等 属性 实现 购物 商城 中 
商品 列表 页 面 的 美化 ， 具 体 实现 步骤 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \05\5.03 ) 

首先 ， 建 立 一 个 HTML 文件 ， 在 该 文件 中 添加 <div> 标 签 以 便于 在 CSS 中 实现 页 面 的 整体 布局 ， 
然后 在 <div> 通 过 定义 列表 和 图 片 标签 添加 文字 ， 下 面 仅 列举 了 向 第 一 个 定义 列表 中 添加 内 容 的 代码 ， 
其 余 3 部 分 代码 与 此 类 似 ， 第 一 部 分 代码 如 下 。 


01 <div class="cont'> 


02 <dl> 

03 <dt><img src="img/phone1.jpg" alt="> </dt> 
04 <dd> 

05 <img src="img/phones1.jpg" alt=""> 
06 <img src="img/phones2.jpg" alt=""> 

07 <img src="img/phones3.jpg" alt="> 
08 <img src="img/phones4.jpg" alt=""> 
09 </dd> 

10 <dd class="price"> ¥ 2998</dd> 

世 <dd>vivo X9s Plus 前 置 2000 万 双 摄 </dd> 
12 <dd>vivo 智 轩 优 品 专卖 店 </dd> 

13 </dl> 


然后 ， 建 立 一 个 CSS3 文件 ,在 CSS3 文件 中 输入 代码 ， 实 现 设置 文本 以 及 图 片 的 样式 ， 有 具体 代码 
如 下 。 


01 .cont{ 

02 width: 1120px; 让 设置 页 面 的 总 体 宽度 */ 

03 height: 400px; * 设 置 页 面 的 总 体高 度 */ 

04 margin: 0 auto; /设置 页 面 的 总 体外 边 距 */ 

05 border 2px solid red; /设置 总 体 页 面 的 边框 ， 设 置 4 条 边框 的 样式 相同 */ 
06 } 

o7 dl 

08 width: 265px; 让 设置 每 一 个 商品 列表 的 宽度 */ 
09 height: 393px; 让 设置 每 一 个 商品 列表 的 高 度 */ 
10 text-align: center: 让 设置 文字 的 对 齐 方 式 */ 

| float: left; /设置 浮动 方式 
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从 margin: Spx; 

13 } 

14 dl:hover{ 

性 border: 2px solid #447BD3; 
16 } 

17 dildtimg{ 

18 margin-top: 20px;; 

19 height: 210px; 

20 

21 dlidd{ 

22 text-align: left; 

23 margin: 8px 20px 8px; 

24 border-bottom: 1px solid #fff; 
125 本 

26 dlddimgf 

27 height 35px; 

28 padding: 5px; 

29 border 2px solid ##ff ; 

30 

31 dlddimg:hover{ 

32 border-style: solid dashed ; 
33 border-color: #00f #f0f; 

34 } 

35 .price~dd:hover{ 

36 border-bottom: 2px solid #00f; 
S70 

38 .price{ 

39 color: red; 

40 font-size: 20px; 

A100) 

42 .price:first-letter{ 

43 font-size: 12px; 

SE 


让 设置 商品 列表 的 外 边 距 */ 


让 设置 当 鼠 标 滑 过 商品 列表 的 样式 */ 
/设置 边框 样式 


/设置 商品 图 片 的 样式 儿 
让 设置 向 上 的 外 边 距 */ 
/设置 商品 图 片 大 小 


/设置 文字 的 总 体 样式 % 
"设置 外 边 距 */ 
/设置 底部 边框 的 样式 


"设置 小 图 标 边 框 */ 


”设置 当 鼠 标 滑 过 小 图 标 时 的 样式 */ 

让 设置 边框 样式 */ 

/设置 边框 颜色 

/设置 鼠标 滑 过 价格 后 面 的 文字 的 样式 %/ 
让 设置 下 边框 的 样式 */ 


* 设 置 价格 文字 的 样式 */ 
/设置 字体 颜色 
让 设置 文字 大 小 */ 


/设置 价格 符号 的 样式 
让 设置 字体 大 小 */ 


完成 代码 编辑 以 后 ， 在 浏览 器 中 运行 HTML 文件 ， 运 行 效果 如 图 5.5 所 示 ， 当 鼠标 放置 在 第 一 部 
分 时 ， 第 一 部 分 就 会 出 现 一 个 整体 的 蓝 色 边框 ， 并 且 当 鼠标 放置 在 手机 小 图 标 上 时 ， 小 图 标 就 会 出 现 
边框 ， 并 且 左 右边 框 为 粉色 虚线 ， 上 下 边框 为 蓝 色 实 线 。 


*2998 


ivo Xplay6 双语 双 尖 绕 夫 820 


各 轩 优 品 专卖 店 


图 5.5 ”购物 商城 中 的 商品 列表 运行 图 
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5.2 布局 常用 属性 


浮动 (float) 和 定位 position) 是 布局 中 常用 的 两 个 属性 。 因 为 ， 在 一 个 文本 中 ， 任 何 一 个 元 素 
都 被 文本 限制 了 自身 的 位 置 。 但 是 ,在 CSS3 中 通过 float 属性 可 以 实现 排列 文档 中 的 内 容 ， 而 position 
属性 可 以 实现 改变 元 素 的 位 置 。 它 可 以 将 元 素 框 定义 在 你 想 出 现 的 任何 位 置 。 这 些 属性 只 要 应 用 得 当 ， 
可 以 实现 各 种 炫 酷 的 效果 。 


5.2.1 浮动 


float 是 CSS3 样式 中 的 定位 属性 ， 用 于 设置 标签 对 象 ( 如 <div> 标 签 盒子 、<p> 标 签 ) 的 浮动 布局 ， 
通过 设置 其 浮动 属性 ， 改 变 元 素 的 排列 方式 ， 其 语法 如 下 。 
01 float: leftlrightlnone; 


回 left， 元 素 浮动 在 左 侧 。 

回 right， 元 素 浮动 在 右 侧 。 

加 ”none: 元 素 不 浮动 。 

例 5.04 本 实例 主要 通过 使 用 float 属性 实现 不 同 的 表情 包 浮 动 效 果 。 首 先 在 HTML 页 面 中 添加 
表情 图 片 以 及 提示 文字 ， 有 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \05\5.04 ) 


01 <div class="cont"> 
02 <p> 当 前 表情 包 的 浮动 属性 为 none， 当 鼠标 滑 过 本 行文 字 时 ， 浮 动 状态 为 left， 而 单 击 文字 时 ， 则 浮动 
状态 为 right， 快 试 一 试 吧 *_*</p> 


03 <div><img src="img/cry.png" alt=""></div> 

04 <div><img src="img/amazed.png" alt=""></div> 
05 <div><img src="img/awkward.png" alt=""></div> 
06 <div><img src="img/laugh.png" alt=""></div> 

07 </div> 


然后 ,在 CSS3 页 面 中 添加 CSS3 代码 ， 并 且 结 合 伪 类 选择 器 设置 不 同 的 表情 浮动 方式 ， 具体 代码 
如 下 。 


01 .cont{ 让 设置 页 面 的 整体 样式 */ 
02 background: rgb(225, 255, 255); 让 设置 页 面 的 背景 颜色 */ 
03 width: 800px; 六 设置 页 面 的 整体 宽度 */ 
04 height: 520px; 让 设置 页 面 的 整体 高 度 */ 
05 margin: 0 auto; 让 设置 页 面 的 整体 外 边 距 */ 
06 } 

orp 让 设置 提示 文字 的 样式 */ 
08 background: #ff0; * 设 置 提示 文字 的 背景 颜色 */ 
09 font-size: 20px:; 让 设置 字体 的 大 小 */ 

10 line-height: 30px; 让 设置 行 高 ”/ 

a 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


12 img{ 让 设置 表情 图 片 的 样式 */ 

13 height: 100px; 让 设置 图 片 统一 高 度 */ 

14 width: 100px:; 户 设 置 图 片 统一 宽度 */ 

二 

16 .cont:hover.cont div{ * 当 鼠标 放置 在 整体 div 上 时 ， 图 片 div 的 样式 */ 
he float: left; 让 设置 浮动 为 左 浮动 */ 

(个 示 

19 .cont:active.cont div{ 请 当 鼠 标 单 击 整体 div 上 时 ， 图 片 div 的 样式 */ 
20 float: right; 广 设置 浮动 为 右 浮动 */ 

-3 


完成 代码 编译 以 后 ， 在 浏览 器 中 运行 HTML 文件 ， 运 行 效果 如 图 5.6 所 示 。 该 效果 图 为 没有 为 表 
情 设置 浮动 方式 ， 也 就 是 浮动 方式 为 none; 当 鼠 标 放置 在 页 面 中 时 ， 图 片 的 浮动 方式 为 左 浮动 ， 也 就 
是 float 的 属性 值 为 left， 页 面 的 效果 如 图 5.7 所 示 ; 当 鼠 标 单 击 页 面 时 ， 图 片 的 浮动 方式 为 右 浮动 ， 即 
float 属性 值 为 right， 页 面 效果 如 图 5.8 所 示 。 


上 前 表情 包 的 浮动 属性 为 none， 当 鼠标 滑 过 本 行文 字 时 ， 浮 动 状态 为 left， 而 单 击 文字 时 ， 
网 浮动 状态 为 right， 快 试 一 试 吧 # 将 


5.7 ”float 的 属性 值 为 left 时 的 图 片 排列 效果 
肯 前 表情 包 的 浮动 展 性 为 none， 当 鼠标 滑 过 本 行文 字 时 ， 浮 动 状态 为 left， 而 单 击 文字 时 ， 
网 浮动 状态 为 righr， 快 试 一 试 吧 * > 


> 
有 

| 

| 
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图 5.8 ”float 的 属性 值 为 right 时 的 图 片 排列 效果 
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5.2.2 ”定位 相关 属性 


在 一 个 文本 中 ， 任 何 一 个 标签 都 被 文本 限制 了 自身 的 位 置 。 但 是 通过 CSS3 可 以 使 这 些 标签 改变 
自己 的 位 置 。CSS3 定位 简单 来 说 就 是 利用 (positioning) 属性 使 标签 出 现在 你 定义 的 位 置 上 。 

定位 的 基本 思想 很 简单 ， 你 可 以 将 标签 框 定 义 在 你 想 其 出 现 的 任何 位 置 上 。 

CSS3 中 提供 了 用 于 设置 定位 方式 的 属性 一 一 position。position 属性 的 语法 格式 如 下 。 


01 position: staticlabsolutelfixed|relative; 


回 static: 无 特殊 定位 ， 对 象 遵循 HTML 定位 规则 。 使 用 该 属性 值 时 ，top、right、bottom 和 left 
等 属性 设置 无 效 。 
回 absolute: 绝对 定位 ， 使 用 top、right、bottom 和 left 等 属性 指定 绝对 位 置 。 使 用 该 属性 值 可 以 
让 对 象 漂浮 于 页 面 之 上 。 
回 fixed: 绝对 定位 ， 且 对 象 位 置 固定 ， 不 随 滚 动 条 移动 而 改变 位 置 。 
回 relative:; 相对 定位 ， 遵 循 HTML 定位 规则 ， 并 由 top、right、bottom 和 left 等 属性 决定 位 置 。 
例 5.05 在 商城 主页 , 当 鼠 标 滑动 到 每 个 选项 时 , 相应 的 内 容 就 会 呈现 出 来 .实现 原理 就 是 在 <div> 
标签 上 设置 相对 定位 ， 并 且 设 置 其 父 标 签 <li> 为 相对 定位 ， 关 键 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \ 
0S\S.05 ) 


o1 Ji 

02 list-style-type: none; A* 设 置 列表 项 的 样式 类 型 */ 
03 width: 202px:; /设置 列表 项 的 宽度 纪 

04 height: 31px; 让 设置 列表 项 的 高 度 */ 

05 text-align: center; ”列表 项 中 文本 的 对 齐 方式 */ 
06 background: #ddd; 让 列表 项 的 背景 颜色 */ 

07 line-height 31px; 让 设置 行 高 / 

08 font-size: 14px; 让 设置 字体 大 小 为 14 像素 */ 
09 position: relative; * 设 置 定位 方式 为 相对 定位 */ 
10 } 


11 .mr-shopli.mr-shop-items { 
12 width: 864px; 

和 名 height: 496px; 

14 background: #eee; 


15 position: relative; 设置 定位 方式 为 相对 定位 */ 
16 left: 202px; 距离 浏览 器 左 方 202 像素 */ 
17 top: -31px; 距离 浏览 器 上 方 -31 像素 */ 

18 display: none; 设置 图 片 为 隐藏 */ 

19 上 


完成 代码 编辑 后 ， 在 浏览 器 中 运行 代码 ， 运 行 效果 如 图 5.9 所 示 。 


Ah 
说 明 
上 面 实例 仅 是 实现 对 鼠标 滑 过 文字 时 右边 出 现 相应 图 片 的 关键 代码 。 关 于 本 实例 具体 代码 ,请 
参照 资源 包 中 的 源码 。 
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女装 /内 衣 
男装 /运动 户外 Sa 
女 鞋 / 男 鞋 /箱包 jr pj 
化 妆 品 /个 人 护理 
腕 表 /珠宝 饰品 /眼镜 
手机 /数码 /电脑 办 公 
母 遇 玩 具 
零食 /进口 食品 / 葵 酒 
生 鲜 水 果 
大 家 电 /生活 电器 = 
家 具 于 村 a 


汽车 /配件 /用 品 
衣 纺 /家 饰 / 【黑色 上 市 】Huawei/ 华 为 Mote 9 32/64GB4C 智 能 手机 限量 抢 


浴 


医药 保健 华为 官方 族 秽 店 
厨具 /收纳 /宠物 


图 所 音像 FA/ 
图 5.9 ”相对 定位 使 用 实例 


5.3 动画 与 特效 


CSS3 中 新 增 了 一 些 用 来 实现 动画 效果 的 属性 ， 通 过 这 些 属性 可 以 实现 以 前 通常 需要 使 用 JavaScript 
或 者 Flash 才能 实现 的 效果 。 例 如 ， 对 HTML 中 的 标签 进行 平移 、 缩 放 、 旋 转 、 倾 斜 ， 以 及 添加 过 渡 效 
果 等 ， 并 且 可 以 将 这 些 变 化 组 合成 动画 效果 来 进行 展示 。 本 节 将 对 CSS3 新 增 的 这 些 属性 进行 详细 介绍 。 


5.3.1 变换 (transform) 


在 CSS3 中 提供 了 transform 和 transform-origin 两 个 用 于 实现 2D 变换 的 属性 。 其 中 ，transform 属 
性 用 于 实现 平移 、 缩 放 、 旋 转 和 倾斜 等 2D 变换 ， 而 transform-origin 属性 则 是 用 于 设置 中 心 点 的 变换 。 
transform 属性 的 属性 值 如 表 5.2 所 示 。 
表 5.2 transform 属性 的 属性 值 
说 有明 


值 /函数 


none 表示 无 变换 
表示 实现 2D 平移。 第 一 个 参数 对 应 水 平方 向 , 第 二 个 参数 对 应 Y 轴 。 如 果 


第 二 个 参数 未 提供 ， 则 默认 值 为 0 


translate(<length>[.<length>]) 


translateX(<length>) 表示 在 和 X 轴 (水 平方 向 ) 上 实现 平移 。 参 数 length 表示 移动 的 距离 
translateY(<length>) 表示 在 立轴 (垂直 方向 ) 上 实现 平移 。 参 数 length 表示 移动 的 距离 
scaleX(<number>) 表示 在 义 轴 上 进行 缩放 
scaleY(<number>) 表示 在 Y 轴 上 进行 缩放 


表示 进行 2D 缩放 。 第 一 个 参数 对 应 水 平方 向 ， 第 二 个 参数 对 应 垂直 方向 。 
如 果 第 二 个 参数 未 提供 ， 则 默认 取 第 一 个 参数 的 值 


scale(<number>[[.<number>]) 
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续 表 
值 /函数 说 了 明 
en 表示 进行 2D 倾斜 。 第 一 个 参数 对 应 水 平方 向 ， 第 二 个 参数 对 应 垂直 方向 。 
如 果 第 二 个 参数 未 提供 ， 则 默认 值 为 0 
skewX(<angle>) 表示 在 义 轴 上 进行 倾斜 
skewY(<angle>) 表示 在 Y 轴 上 进行 倾斜 
Totate(<angle>) 表示 进行 2D 旋转 。 参 数 <angle> 用 于 指定 旋转 的 角度 


代表 一 个 基于 和 矩阵 变换 的 函数 。 它 以 一 个 包含 六 个 值 (a.b.c.d,e.f) 的 变换 矩 
阵 的 形式 指定 一 个 2D 变换 ， 相 当 于 直接 应 用 一 个 [ab c de 引 变 换 矩 阵 。 也 
就 是 基于 X 轴 (水 平方 向 ) 和 YY 轴 (垂直 方向 ) 重新 定位 标签 ， 此 属性 值 
的 使 用 涉及 数学 中 的 矩阵 


matrix(<number>,<number>.<number>、 
<number>,<number>,<number>) 


多 学 两 招 

transform 属性 支持 一 个 或 多 个 变换 函数 。 也 就 是 说 ， 通 过 transform 属性 可 以 实现 平移 、 缩 放 、 
旋转 和 倾 针 等 组 合 的 变换 效果 。 不 过 , 在 为 其 指定 多 个 属性 值 时 不 是 使 用 常用 的 过 号 “,” 进行 分 隔 ， 
而 是 使 用 空格 进行 分 隔 。 


例 5.06 在 HTML 页 面 中 ， 当 鼠标 滑 过 手机 图 片 时 ， 逐 渐 向 两 边 展开 手 机 图 片 ， 实 现 步骤 如 下 。 
(实例 位 置 : 资源 包 \ 源 码 \05\5.06 ) 
(1) 新 建 一 个 HTML 文件 , 然后 通过 <img> 标 签 添加 4 张 要 实现 动画 效果 的 图 片 , 关键 代码 如 下 。 


01 <divclass="mr-content"> 
02 <div class="mr-block"> 


03 <h2> 旋 转 </h2> 

04 <img src="images/10-1.jpg" alt="img1" class="mr-img1"> 
05 </div> 

06 <div class="mr-block"> 

07 <h2> 缩 放 </h2> 

08 <img src="images/10-1a.jpg" alt="img1" class="mr-img2"> 
09 </div> 

10 <div class="mr-block"> 

11 <h2> 平 移 </h2> 

12 <img src="images/10-1b.jpg" alt="img1" class="mr-img3"> 
13 </div> 

14 <div class="mr-block"> 

15 <h2> 倾 斜 </h2> 

16 <img src="images/10-1c.jpg" alt="img1" class="mr-img4"> 
17 </div> 

18 </div> 


(2) 新 建 一 个 CSS3 文件 ， 通 过 外 部 样式 引入 HTML 文件 ， 通 过 transform 中 的 rotate 属性 值 实 
现 旋 转 效 果 ， 关 键 代码 如 下 。 
01 .mr-content .mr-block .mr-img1:hover{ 


02 transform:rotate(30deg); / 顺 时 针 旋 转 30 度 */ 
03 } 
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(3) 通过 transform 中 的 scale 属性 值 实现 缩放 效果 ， 关 键 代码 如 下 。 


01 .mr-content .mr-block .mr-img2:hover{ 
02 transform:scaleX(2); 在 X 轴 上 进行 缩放 */ 
03 } 


(4) 通过 transform 中 的 translate 属性 值 实现 平移 效果 ， 关 键 代码 如 下 。 


01 .mr-content .mr-block .mr-img3:hover{ 
02 transform:translateX(60px); 在 X 轴 上 进行 平移 */ 
03 } 


(5) 通过 transform 中 的 skew 属性 值 实现 倾斜 效果 ， 关 键 代码 如 下 。 
01 .mr-content .mr-block .mr-img4:hover{ 
02 transform:skew(3deg,30deg); AH 在 X 和 Y 轴 上 进行 倾斜 */ 
03 } 


完成 代码 编辑 后 ， 在 浏览 器 中 运行 代码 ， 运 行 效果 如 图 5.10 所 示 ， 当 鼠标 停 在 图 片上 时 ， 图 片 就 
会 显示 对 应 的 动画 效果 ， 如 图 5.11 所 示 。 
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旋转 缩放 1 旋转 缩放 
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图 5.10 4 张 不 同 的 变换 效果 图 5.11 旋转 后 的 效果 
5.3.2 过 渡 (transition) 


CSS3 提供 了 用 于 实现 过 渡 效 果 的 transition 属性 , 该 属性 可 以 控制 HTML 标签 的 某 个 属性 发 生 改变 时 
所 经 历 的 时 间 ， 并 且 以 平滑 渐变 的 方式 发 生 改变 ， 从 而 形成 动画 效果 。 下 面 逐 一 介绍 transition 的 各 属性 。 
(1) 指定 参与 过 渡 的 属性 。 
CSS3 中 指定 参与 过 渡 的 属性 为 transition-property， 语 法 格式 如 下 。 


01 transition-property:all | none | <property>[ <property> ] 


回 all: 默认 值 ， 表 示 所 有 可 以 进行 过 渡 的 CSS3 属性 。 
回 “none: 表示 不 指定 过 渡 的 CSS3 属性 。 
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<property>: 表示 指定 要 进行 过 渡 的 CSS3 属性 。 可 以 同时 指定 多 个 属性 值 ， 以 英文 格式 下 的 
逗号 “,” 进 行 分 隔 。 
(2) 指定 过 渡 持 续 的 时 间 。 
CSS3 中 指定 过 渡 持 续 时 间 的 属性 为 transition-duration， 语 法 格式 如 下 。 


01 transition-duration:<time>[ ,<time> ] 


<time> 用 于 指定 过 渡 持 续 的 时 间 ， 默 认 值 为 0， 如 果 存 在 多 个 属性 值 ， 以 英文 格式 下 的 逗号 “,” 
进行 分 隔 。 
(3) 指定 过 渡 的 延迟 时 间 的 属性 。 
CSS3 中 指定 过 渡 的 延迟 时 间 的 属性 为 transition-duration， 也 就 是 延迟 多 长 时 间 才 开始 过 渡 。 语 法 
格式 如 下 。 
01 transition-delay:<time>[ ,<time> ] 
<time> 用 于 指定 延迟 过 渡 的 时 间 ， 默 认 值 为 0， 如 果 存 在 多 个 属性 值 ， 以 英文 格式 下 的 逗号 “,” 
进行 分 隔 。 
(4) 指定 过 渡 的 动画 类 型 属性 。 
CSS3 中 指定 过 渡 动 画 类 型 的 属性 为 transition-timing-function， 该 属性 的 语法 格式 如 下 。 


01 transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(x1,y1,x2,y2) 
Llinearlease| ease-inlease-outlease-in-outlcubic-bezier(x1,y1,x2,y2) ] 


属性 值 说 明 如 表 5.3 所 示 。 
表 5.3 transition-timing-function 属性 的 属性 值 说 明 

属性 值 说 明 
linear 线性 过 渡 ， 也 就 是 匀速 过 渡 
ease 平滑 过 渡 ， 过 渡 的 速度 会 逐渐 慢 下 来 
ease-in 由 慢 到 快 ， 也 就 是 逐渐 加 速 
ease-out 由 快 到 慢 ， 也 就 是 逐渐 减速 
ease-in-out 由 慢 到 快 ， 再 到 慢 ， 也 就 是 先 加 速 后 减速 
cubic-bezier(x1.y1.x2.y2) 特定 的 贝 塞 尔 曲线 类 型 ， 由 于 贝 塞 尔 曲线 比较 复杂 ， 所 以 此 处 不 做 过 多 描述 


例 5.07 利用 transition 属性 实现 当 打 开 网 页 时 , 页 面 的 背景 自动 地 切换 , 并 且 当 鼠标 滑 过 图 片 时 ， 
页 面 中 的 图 片 自动 展开 ， 具 体 实 现 步骤 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \0S\5.07 ) 
(1) 新 建 一 个 index.html 页 面 ， 在 该 页 的 <body> 部 分 添加 手机 图 片 ， 代 码 如 下 。 


01 <divclass="mr-bakg"> 
02 <div class="mr-picbom"> 


03 <div class="mr-pic"><img src="images/phine1.png" alt="" /></div> 

04 <div class="mr-picleft"><img src="images/phine2.png" alt="" /></div> 
05 <div class="mr-picright"><img src="images/phone3.png" alt="" /></div> 
06 </div> 

07 <ldiv> 


3 和 
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(2) 将 3 个 图 片 放 到 页 面 中 间 同 一 位 置 ， 然 后 设置 鼠标 滑 过 时 ， 手 机 图 片 展 开 的 动画 ， 代 码 如 下 。 


01 .mr-picbom{ * 放 置 图 片 的 盒子 */ 

02 position: relative; 户 设 置 其 定位 方式 为 相对 定位 */ 

03 margin: 50px 242px:; 让 设置 其 上 下 边 距 和 左右 边 距 */ 

04 width: 110px; 

05 height: 190px 

06 } 

07 .mr-picleft,.mr-picright{ /* 通 过 定位 将 左右 两 张 图 片 与 中 间 图 片 重合 % 

08 position: absolute; * 设 置 其 为 绝对 定位 */ 

09 top: Opx; 

10 } 

11 .mr-picbom:hover .mr-picleft{ 让 当 鼠 标 悬 停 于 中 间 图 片 时 ， 左 边 图 片 向 左边 平移 */ 
12 transform: translateX(190px); 

13 transition: all 1s ease; 

14 } 

15 .mr-picbom: hover .mr-picright{ /* 当 鼠标 悬 停 于 中 间 图 片 时 ， 右 边 图 片 向 右边 平移 4/ 


16 transform: translateX(-190px); 
17 transition: all 1s ease; 
18 } 


完成 代码 编辑 后 ， 打 开 网 页 ， 页 面 的 背景 自动 切换 ， 如 图 5.12 所 示 ; 而 当 鼠 标 滑 过 中 间 的 手机 图 
片 时 ， 页 面 效 果 如 图 5.13 所 示 。 


二 


图 5.12 打开 页 面 时 效果 图 5.13 鼠标 滑 过 中 间 图 片 时 效果 


/ 
CO 说 明 
本 实例 的 实现 步骤 中 ， 仅 展示 了 展开 手机 图 片 的 代码 ， 关 于 自动 切换 背景 图 片 部 分 的 代码 ， 请 


5.3.3 动画 (animation) 


使 用 CSS3 实现 动画 效果 需要 两 个 过 程 ， 分 别 是 定义 关键 帧 和 引用 关键 帧 。 首 先 介绍 关键 帧 的 定 
义 方 法 。 
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1. 关键 帧 
在 实现 Animation 动画 时 ， 需 要 先 定义 关键 帧 ， 定 义 关键 帧 的 语法 格式 如 下 。 
01 @keyframes name { <keyframes-blocks> 上 


属性 值 说 明 。 

回 name: 定义 一 个 动画 名 称 ， 该 动画 名 称 将 用 来 被 animation-name 属性 (指定 动画 名 称 属性 ) 
所 使 用 。 

回 ”<keyframes-blocks>: 定义 动画 在 不 同时 间 段 的 样式 规则 。 该 属性 值 包括 以 下 两 种 形式 。 

第 1 种 方式 为 使 用 关键 字 fom 和 to 定义 关键 帧 的 位 置 , 实现 从 一 个 状态 过 渡 到 男 一 个 状态 , 语法 如 下 。 

01 from{ 


02 属性 1: 属 性 值 1; 
03 属性 2: 属 性 值 2; 


05 属性 n: 属 性 值 n; 
06 } 
07 to{ 


08 属性 1: 属 性 值 1; 
09 属性 2: 属 性 值 2; 


10 oo 
11 属性 n: 属 性 值 n; 
2 


例如 ， 定 义 一 个 名 称 为 opacityAnim 的 关键 帧 ,用 于 实现 从 完全 透明 到 完全 不 透明 的 动画 效果 , 可 
以 使 用 下 面 的 代码 。 


01 @-webkit-keyframes opacityAnim{ 
02 from{opacity:0;} 

03 to{opacity:1;} 

(04) 


第 二 种 方式 为 使 用 百分比 定义 关键 帧 的 位 置 ， 实 现 通过 百分比 来 指定 过 渡 的 各 个 状态 ， 语 法 格式 
如 下 。 
01 百分比 1{ 


02 属性 1: 属 性 值 1; 
03 属性 2: 属 性 值 2; 


05 属性 n: 属 性 值 n; 
06 j 

07 Eo 

08 ”百分比 n{ 


10 属性 2: 属 性 值 2; 
12 属性 n: 属 性 值 n; 
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例如 ， 定 义 一 个 名 称 为 complexAnim 的 关键 帧 ， 用 于 实现 将 对 象 从 完全 透明 到 完全 不 透明 ， 再 逐 
渐 收缩 到 80%， 最 后 再 从 完全 不 透明 过 渡 到 完全 透明 的 动画 效果 ， 可 以 使 用 下 面 的 代码 。 

01 @-webkit-keyframes complexAnim{ 

02 0%{opacity:0;} 

03 20%{opacity:1;} 

04 50%{-webkit-transform:scale(0.8);} 

05 80%{opacity:1;} 

06 100%{opacity:0;} 


0 注意 
在 指定 百分比 时 ， 一 定 要 加 “%”， 如 0%、50% 和 100% 等 。 
2. 动画 属性 


要 实现 Animation 动画 ， 在 定义 了 关键 帧 以 后 ， 还 需要 使 用 动画 相关 属性 来 执行 关键 帧 的 变化 。 
CSS3 为 Animation 动画 提供 如 表 5.4 所 示 的 9 个 属性 。 


表 5.4 _ Animation 动画 的 属性 


属 性 属 性 值 说 明 

animation 复合 属性 。 以 下 属性 的 值 的 综合 用 于 指定 对 象 所 应 用 的 动画 特效 

animation-name name, 指定 对 象 所 应 用 的 动画 名 称 

animation-duration time+ 单 位 s( 秒 ) 指定 对 象 动画 的 持续 时 间 

animation-timing-function | 其 属性 值 与 transition-timing-function 属性 值 相 关 指定 对 象 动画 的 过 渡 类 型 

animation-dela; time+ 单 位 s( 秒 ) 指定 对 象 动画 延迟 的 时 间 

animation-iteration-count | number 或 infinite (无 限 循环 ) 指定 对 象 动画 的 循环 次 数 
normal (默认 值 ， 表 示 正 常 方向 ) 或 alternate (表示 正 | 指定 对 象 动画 在 循环 中 是 否 反 向 


animation-direction 


常 与 反 向 交替 ) 运动 
animation-play-state ruinning (默认 值 ， 表 示 运 动 ) 或 paused (表示 暂停 ) | 指定 对 象 动画 的 状态 
Done: 表示 不 设置 动画 之 外 的 状态 ， 默 认 值 ; 
forwards: 表示 设置 对 象 状 态 为 动画 结束 时 的 状态 ; 
backwards: 表示 设置 对 象 状态 为 动画 开始 时 的 状态 ; 
both; 表示 设置 对 象 状态 为 动画 结束 或 开始 的 状态 


animation-fill-mode 


指定 对 象 动画 时 间 之 外 的 状态 


De 


设置 动画 属性 时 ， 可 以 加 更 多 个 动画 属性 值 写 在 一 行 里 ， 例 如 下 面 的 代码 。 


01 .mr-in{ 

02 animation-name: lun; 

03 animation-duration: 10s; 

04 animation-timing-function: linear; 
05 animation-direction: normal; 

06 animation-iteration-count: infinite; 
Or 
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上 面 的 代码 中 设置 的 动画 属性 中 的 动画 名 称 、 动 画 持续 时 间 、 动 画 速度 曲线 、 动 画 运动 方向 以 及 
动画 播放 次 数 ， 如 果 将 这 些 属 性 写 在 一 起 ， 代 码 如 下 。 


01 .mr-in{ 
02 animation: lun 10s linear infinite normal; 
03 } 


例 5.08 通过 Animation 属性 可 以 实现 购物 商城 中 商品 详情 里 滚动 播 出 广告 ,具体 实 现 步骤 如 下 。 
( 实例 位 置 : 资源 包 \ 源 码 \05\5.08 ) 
(1) 新 建 一 个 HTML 文件 ， 通 过 <p> 标 签 添加 广告 文字 ， 关 键 代 码 如 下 。 


01 <divclass="mr-content"> 
02 <div class="mr-news"> 


03 <div class="mr-p"> 

04 <p> 华 为 年 度 盛典 </p> <!- 通 过 <p> 标 签 添加 新 闻 文 字 --> 
05 <p> 惊 喜 连连 </p> 

06 <p> 新 品 手机 震 手 上 市 </p> 
07 <p> 折 扣 多 多 </p> 

08 <p> 不 容错 过 </p> 

09 <p> 惊 喜 购 机 有 好 礼 </p> 
10 <p> 满 减 优惠 </p> 

11 <p> 神 秘 幸运 奖 </p> 

12 <p> 华 为 等 你 带 回 家 </p> 
13 </div> 

14 </div> 

15 </div> 


(2) 新 建 一 个 CSS3 文件 ， 通 过 外 部 样式 引入 HTML 文件 ， 通 过 Animation 属性 实现 滚动 播 出 广 


告 ， 关 键 代 码 如 下 。 
01 .mr-p{ 
02 height: 30px; * 设 置 高 度 */ 
03 margin-top: 0; /设置 外 边 距 ?/ 
04 color: #333; 记 设 置 字体 颜色 */ 
05 font-size: 24px:; /设置 字体 大 小 六 
06 animation: lun 10s linear infinite; 让 设置 动画 */ 
07 } 
08 @-webkit-keyframes lun { A* 通 过 百分比 指定 过 度 各 个 状态 时 间 */ 


09 0%{margin-top:0;} 

10 10%{margin-top:-30px;} 
gs 20%{margin-top:-60px;} 
2 30%{margin-top:-90;} 

13 40%{margin-top:-120px;} 
14 50%{margin-top:-150px;} 
15 60%{margin-top:-180;} 
16 70%{margin-top:-210px;} 
17 80%{margin-top:-240px;} 
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18 90%{margin-top:-270px;} 
19 100%{margin-top:-310px;} 
20 } 


将 代码 保存 以 后 ， 在 浏览 器 中 打开 ， 效 果 如 图 5.14 所 示 。 


手机 赫 捷 上 市 


错过 


图 5.14 滚动 广告 


有 多 学 两 


实现 CSS3 中 的 动画 效果 时 ， 需要 在 页 面 中 添加 块 级 标签 <div>， 并 且 设置 其 出 内 容 显示 为 隐 | 
藏 (overflow: hidden; ) ， 然 后 在 其 内 部 谋 套 一 个 块 级 标签 用 来 添加 动画 内 容 (例如 上 面 实 例 中 的 滚 
动 文字 ) 。 | 


5.4 小 结 


本 章 重点 讲解 CSS3 的 高 级 应 用 ， 主 要 包括 CSS3 中 框 模型 、 布 局 以 及 CSS3 中 动画 与 特效 。 而 了 
解 框 模型 是 熟练 布局 的 基础 ， 所 以 ， 读 者 学 习 时 ， 正 确 理解 框 模型 的 概念 并 且 尽 可 能 多 地 运用 本 章 知 
识 点 。 学 完 本 章 用 户 不 仅 可 以 通过 布局 将 页 面 进行 美化 ， 还 可 以 运用 运用 动画 在 页 面 中 添加 特效 。 


5.5 实 战 


5.5.1 实战 一 : 设置 手机 筛选 页 面 


试制 作 购物 网 站 中 如 图 5.15 所 示 的 手机 筛选 页 面 。( 资源 包 \ 源 码 \0S\ 实 战 \01 ) 


i 
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品牌 
A 4 
【 团 小 米 Huawer honor Vivo oppo 
分 类 手机 
网 阁 类 型 移动 联通 电信 全 网 通 
机 身 内 存 RAM 166 326 64G 128G 


图 5.15 手机 筛选 页 面 


5.5.2 ”实战 二 : 制作 横向 导航 


试 着 结合 使 用 HTML 和 CSS3 制作 一 个 网 页 的 横向 导航 栏 ， 要 求 鼠标 滑 过 时 展开 对 应 内 容 。( 资源 
包 \ 源 码 \0S\ 实 战 \02 ) 


5.5.3 ”实战 三 : 制作 图 片 轮 播 


试 着 使 用 WebStorm 编译 器 制作 网 站 首页 的 图 片 轮 播 效果 。( 资源 包 \ 源 码 \0S\ 实 战 \03 ) 


第 二 
时 

表格 与 <div> 标 签 

( 名 视频 讲解 : 1 小 时 12 分 钟 ) 


表格 是 在 网 页 设计 中 经 常 使 用 的 表现 形式 ， 表 格 可 以 存储 更 多 内 容 ， 可 以 方便 
传达 信息 。<div> 标 签 可 以 统一 管理 其 他 标签 ， 如 标题 标签 、 段 落 标 签 等 ， 形 象 地 
说 ， 其 他 标签 如 同一 个 个 小 的 箱子 ， 可 以 放 入 <div> 标 签 这 个 大 箱子 中 。 这 样 做 的 
好 处 是 ， 可 以 对 越 来 越 多 的 标签 进行 分 组 和 管理 。 本 章 将 详细 讲解 表格 和 <div> 标 
签 的 内 容 。 

学 习 摘 要 : 

WI 简单 表格 的 制作 

由 表格 的 高 级 应 用 

WV <div> 标 答 

WI <span> 标 签 
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6.1 简单 表格 


表格 是 用 于 排列 内 容 的 最 佳 手 段 。 在 HTML 页 面 中 ， 有 很 多 页 面 都 是 使 用 表格 进行 排版 的 。 
的 表格 是 由 <table> 标 签 、<tr> 标 签 和 <td> 标 签 组 成 的 。 通 过 使 用 <table> 表 格 标签 ， 可 以 完成 课程 表 、 
成 绩 单 等 常见 的 表格 。 


6.1.1 简单 表格 的 制作 


表格 标签 是 <table>.…</table>， 表 格 的 其 他 标签 需要 在 表格 的 开始 标签 <table> 和 表格 的 结束 标签 
</table> 之 间 才 有 效 。 用 于 制作 表格 的 主要 标签 如 表 6.1 所 示 。 
表 6.1 表格 标签 


语法 格式 如 下 。 


01 <table> 

02 <tr> 

03 <td> 单 元 格 内 的 文字 </td> 
04 <td> 单 元 格 内 的 文字 </td> 
05 5 

06 </tr> 

07 <tr> 

08 <td> 单 元 格 内 的 文字 </td> 
09 <td> 单 元 格 内 的 文字 </td> 
10 SE 

11 </tr> 

公 二 

13 </table> 


在 上 面 的 语法 中 ，<table> 和 </table> 标 记分 别 标志 着 一 个 表格 的 开始 和 结束 ， 而 <t> 和 </tr> 标 记 则 
分 别 表示 表格 中 一 行 的 开始 和 结束 , 在 表格 中 包含 几 组 <tr>...</tr>, 就 表示 该 表格 为 几 行 ; <td> 和 </td> 
标记 表示 一 个 单元 格 的 开始 和 结束 ， 也 可 以 说 表示 一 行 中 包含 了 几 列 。 

例 6.01 本 实例 巧 用 <table> 表 格 标签 、<tr> 行 标签 和 <td> 单 元 格 标签 ， 实 现 一 个 考试 成 绩 单 的 表 
格 。 首 先 编写 代码 <table>...</table>， 通 过 <table> 表 格 标签 ， 创 建 一 个 表格 框架 ， 然 后 通过 <tr> 行 标签 ， 
创建 表格 中 的 一 行 ， 最 后 使 用 <td> 单 元 格 标签 ， 输 入 具体 的 内 容 ， 具 体 代码 如 下 。( 实例 位 置 : 资源 包 \ 
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源码 \06\6.01 ) 


100 


13 


40 
41 
42 


<!IDOCTYPE html> 
<html> 
<head> 
<!- 指 定 页 面 编码 格式 --> 
<meta charset="UTF-8"> 
<!- 指 定 页 头 信息 --> 
<title> 基 本 表格 </title> 
</head> 
<body> 
<h1 align="center"> 基 本 表格 -- 考 试 成 绩 表 </h1> 
<!--<table> 为 表格 标记 一 > 
<table align="center"> 
<!--<tr> 为 行 标签--> 
<tr> 
<!--<th> 为 表 头 标记 -> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
</tr> 
<tr> 
<!--<td> 为 单元 格 --> 
<td> 王 佳 </td> 
<td>94 分 </td> 
<td>89 分 </td> 
<td>56 分 </td> 
</tr> 
<tr> 
<td> 李 翔 </td> 
<td>76 分 </td> 
<td>85 分 </td> 
<td>88 分 </td> 
</tr> 
<tr> 
<td> 张 莹 佳 </td> 
<td>89 分 </td> 
<td>86 分 </td> 
<td>97 分 </td> 
</tr> 
</table> 
</body> 
</html> 


运行 效果 如 图 6.1 所 示 。 
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EP x\ 
© |B localhost63 


图 6.1 考试 成 绩 表 的 界面 效果 


常见 错误 
开始 标签 与 属性 之 间 漏 加 空格 ， 例 如 ， 把 <table align="center"> 写 成 <tablealign="center">， 导 致 
浏览 器 无 法 识别 <table> 标 签 ， 从 而 导致 页 面 布局 错乱 。 例 如 ， 在 下 面 代码 01 行 处 ，<table 
align="center"> 就 写成 了 <tablealign="center">。 


01 <tablealign="center"> 
02 <!--<tr> 为 行 标签 -> 


03 <tr> 

04 <I-<td> 为 表 头 标记 --> 
05 <th> 姓 名 </th> 

06 <th> 语 文 </th> 

07 <th> 数 学 </th> 

08 <th> 英 语 </th> 

09 </tr> 

10 <!L- 省 略 部 分 代码 --> 

11 </table> 


将 会 出 现 如 图 6.2 所 示 的 错误 提示 。 


i [ee 
& | © localhost6: indexhtn i 国 : | 
基本 表格 -- 考 试 成 绩 表 


姓名 语文 数学 状语 王仁 94 分 89 分 56 分 地 翔 76 分 85 分 88 分 张 著 
佳 89 分 86 分 97 分 


6.2 表格 标签 漏 加 空格 的 错误 界面 


6.1.2 ” 表 头 的 设置 


表格 中 还 有 一 种 特殊 的 单元 格 ， 称 为 表 头 。 表 头 一 般 位 于 表格 第 一 行 ， 用 来 表明 该 列 的 内 容 类 别 ， 
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用 <th> 和 </th> 标 签 来 表示 。 与 <td> 标 签 的 使 用 方法 相同 ， 但 是 <th> 标 签 中 的 内 容 是 加 粗 显示 的 。 


语法 格式 如 下 。 

01 <table> 

02 <caption> 表 格 的 标题 </caption> 

03 <tr> 

04 <th> 表 格 的 表 头 </th> 

05 <th> 表 格 的 表 头 </th> 

07 </tr> 

08 <tr> 

09 <td> 单 元 格 内 的 文字 </td> 
10 <td> 单 元 格 内 的 文字 </td> 
ul! 本 

忆 </tr> 

13 3 

14 </table> 


重 s 注 意 


<td> 普 通 单元 格 


在 编写 代码 的 过 程 中 ， 结 束 标签 不 要 忘记 添加 “/”。 


例 6.02 ”本 实例 使 用 <table> 表 格 标签 、<caption> 表 头 标签 、<th> 表 头 单元 格 标签 、<tr> 行 标签 和 
< 现 一 个 简单 的 课程 表 。 首 先 通过 <table> 标 签 , 创建 一 个 表格 , 然后 利用 <caption> 


表 头 标签 ,制作 表 头 文字 “简单 课程 表 ”， 最 后 使 用 <tr> 行 标签 和 <td> 单 元 格 标签 ， 输入 课程 表 的 内 容 ， 
有 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \06\6.02 ) 
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01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<!- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!-- 指 定 页 头 信息 一 > 

07 ”<title> 简 单 课程 表 </title> 

08 </head> 

09 <body> 

10 ”<!-<table> 为 表格 标记 -> 

11 <table align="center"> 

12 <!--<caption> 表 头 标签 --> 
13 <caption> 简 单 课 程 表 </caption> 
14 <!--<tr> 为 行 标签 --> 


15 <tr> 

16 <!--<th> 为 表 头 标记 一 > 
17 <th> 星 期 一 </th> 

18 <th> 星 期 二 </th> 

19 <th> 星 期 三 </th> 

20 <th> 星 期 四 </th> 

ea <th> 星 期 五 </th> 
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2 </tr> 

23 <tr> 

24 <!--<td> 为 单元 格 -> 
5 <td> 数 学 </td> 
26 <td> 语 文 </td> 
2 <td> 数 学 </td> 
28 <td> 语 文 </td> 
29 <td> 数 学 </td> 
30 </tr> 

3 <tr> 

32 <td> 语 文 </td> 
33 <td> 数 学 </td> 
34 <td> 语 文 </td> 
35 <td> 数 学 </td> 
36 <td> 语 文 </td> 
37 </tr> 

38 <tr> 

39 <td> 体 育 </td> 
40 <td> 语 文 </td> 
41 <td> 英 语 </td> 
42 <td> 综 合 </td> 
43 <td> 语 文 </td> 
44 </tr> 

45 </table> 

46 </body> 

47 </html> 

运行 效果 如 图 6.3 所 示 。 


localhost: 


星期 一 星期 期 四 星期 五 
数学 语文 数学 语文 数学 | 
语文 数学 语文 数学 语文 
体育 语文 英语 综合 语文 


一 一 一 一 一 一 
6.3 简单 课程 表 的 界面 效果 


6.2 表格 的 高 级 应 用 


6.2.1 表格 的 样式 
除了 基本 表格 外 ， 表 格 可 以 设置 一 些 基本 的 样式 属性 。 如 可 以 设置 表格 的 宽度 、 高 度 、 对 齐 方式 、 
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插入 图 片 等 。 
语法 格式 如 下 。 
01 <table> 
02 <caption> 表 格 的 标题 </caption> 
03 <tr> 
04 <th> 表 格 的 表 头 </th> 
05 <th> 表 格 的 表 头 </th> 
06 
07 </tr> 
08 <tr> 
09 <td><img src=" 引 入 图 片 路 径 "></td> 
10 <td><img src=" 引 入 图 片 路 径 "></td> 
| 5 
忆 </tr> 
13 3 
14 </table> 


例 位 置 : 
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例 6.03 本 实例 在 <td> 单 元 格 标签 中 插入 <img> 图 标 标签 ， 实 现 了 一 个 商品 推荐 表格 。 首 先 通 过 
<table> 标 签 ， 创 建 一 个 表格 框架 ， 然 后 利用 <tr> 行 标签 和 <td> 普 通 单元 格 标签 ， 输 入 商品 的 文字 内 容 ， 
在 最 后 


01 
02 
03 
04 
05 
06 
07 
08 


-组 <td> 单 元 格 标签 中 ， 使 用 <img> 标 签 ， 在 单元 格 中 插入 具体 商品 图 片 ， 具 体 代码 如 下 。( 实 


资源 包 \ 源 码 \06\6.03 ) 


<IDOCTYPE html> 
<html> 

<head> 

<!- 指 定 页 面 编码 格式 --> 
<meta charset="UTF-8"> 


<!- 指 定 页 头 信息 --> 
<title> 商 品 表格 </title> 
</head> 

<bo 


<!--<table> 为 表格 标记 一 > 
<table align="center" width="66%" height="480" align="center"> 
<caption><b> 商 品 表 格 </b></caption> 
<tr height="36" bgcolor="#DD2727"> 
<th> 潮 流 前 沿 </th> 
<th> 手 机 酷 玩 </th> 
<th> 品 质 生活 </th> 
<th> 国 际 海 购 </th> 
<th> 个 性 推荐 </th> 
</tr> 
< 上 -单元 格 加 入 介绍 文字 一 > 
<tr align="center > 
<td> 换 新 </td> 
<td> 手 机 馆 </td> 
<td> 必 抢 </td> 
<td> 识 货 </td> 
<td> 围 货 </td> 


35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
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</tr> 
<!-- 单 元 格 加 入 介绍 文字 一 > 
<tr align="center"> 
<td> 品 牌 精 选 新 品 </td> 
<td> 手 机 新 品 </td> 
<td> 巨 超 值 卖 疯 了 </td> 
<td> 全 球 最 热 好 货 </td> 
<td> 居 家 必 备 </td> 
</tr> 
<!- 单 元 格 加 入 图 片 装饰 -> 
<tr align="center"> 
<td><img src="images/1.jpg" alt=""></td> 
<td><img src="images/2.jpg" alt=""></td> 
<td><img src="images/3.jpg" alt=""></td> 
<td><img src="images/4.jpg" alt=""></td> 
<td><img src="images/5.jpg" alt=""></td> 
</tr> 
</table> 
</body> 
</html> 


运行 效果 如 图 6.4 所 示 。 


6.2.2 


J 
EE 


@ D localhost dex htn 和 
向 品 表格 
志和 手机 当 必 拉 识 和 轩 灌 


品 多情 入 条 品 于 机 而 吕 下 起 值 入 人 全 天 最 热 好 货 居 窜 省 
Co (rn CPI | 


6.4 商品 推荐 表格 的 界面 效果 


= 


表格 的 合并 


表格 的 合并 是 指 在 复杂 的 表格 结构 中 ， 有 些 单元 格 是 跨 多 个 列 ， 有 些 单元 格 是 跨 多 个 行 的 。 
语法 格式 如 下 。 


01 
02 


<td colspan=" 跨 的 列 数 "> 
<td rowspan=" 跨 的 行 数 "> 
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在 前 面 的 语法 中 ， 跨 的 列 数 是 指 这 个 单元 格 所 跨 的 列 数 ， 跨 的 行 数 是 指 单元 格 在 垂直 方向 上 跨 的 


行 数 。 
例 6.04 本 实例 使 用 <tr> 行 标签 中 的 rowspan 


属性 ， 将 多 行 合并 成 一 行 ， 实 现 一 个 较 复杂 的 课程 


表 。 首先 使 用 <table> 标 签 ， 新 建 一 个 表格 框架 ,然后 通过 <tr> 行 标签 和 <td> 单 元 格 标签 ， 完 成 常规 表格 
的 制作 ， 最 后 在 希望 合并 的 单元 格 标签 <td> 中 ， 添 加 属性 rowspan， 属 性 值 为 2， 表示 将 两 行 合并 为 一 
行 ， 关 键 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \06\6.04 ) 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<!-- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!-- 指 定 页 头 信息 -> 

07 ”<title> 复 杂 课 程 表 </title> 

08 </head> 

09 <body style="background-image:url(images/bg.jpg) "> 
10 ”<h1 align="center"> 课 &nbsp; 程 &nbsp; 表 </h1> 
11 ”<!-<table> 为 表格 标记 -> 

12 <table align="center" border="1px" cellpadding="10%" > 
13 <!- 课 程 表 日 期 -> 

14 <tr bgcolor="#A5FEDE"> 

15 <th></th> 

16 <th></th> 

17 <th> 星 期 一 </th> 

18 <th> 星 期 二 </th> 

19 <th> 星 期 三 </th> 

20 <th> 星 期 四 </th> 

21 <th> 星 期 五 </th> 

22 </tr> 

23 <!-- 课 程 表 内 容 --> 

24 <tr align="center"> 

25 <!-- 使 用 rowspan 属性 进行 列 合并 --> 

26 <td bgcolor="#FCD1C0" rowspan="2"> 上 午 </td> 
27 <td bgcolor="#FCD1C0">1</td> 

28 <td> 数 学 </td> 

29 <td> 语 文 </td> 

30 <td> 英 语 </td> 

31 <td> 体 育 </td> 

32 <td> 语 文 </td> 

33 </tr> 

34 < 上 -课程 表 内 容 --> 

S5 <tr align="center > 

36 <td bgcolor="#FCD1C0">2</td> 

37 <td> 音 乐 </td> 

38 <td> 英 语 </td> 

39 <td> 政 治 </td> 

40 <td> 美 术 </td> 
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41 <td> 音 乐 </td> 
42 </tr> 
43 < 上 -省 略 部 分 代码 -> 
44 </table> 
45 </body> 
46 -</html> 
运行 效果 如 图 6.5 所 示 。 
Te 合 蕊 本 二 号 | 
》 因 2 
| © |D localhost63342/04/index.html 六 二 三 


1 
2 
3 
4 


图 6.5 复杂 课程 表 的 界面 效果 
6.2.3 ”表格 的 分 组 


表格 可 以 使 用 <colgroup> 标 签 对 列 进行 样式 控制 。 如 单元 格 的 背景 颜色 、 字 体 大 小 等 。 
语法 格式 如 下 。 


01 <table> 

02 <colgroup> 

03 <col style="background-color: 颜 色 值 "> 
04 <col style="color- 颜 色 值 "> 
05 <colgroup> 

06 <tr> 

07 <td> 单 元 格 内 的 文字 </td> 
08 <td> 单 元 格 内 的 文字 </td> 
10 </tr> 

11 本 

12 </table> 


在 上 面 的 语法 中 , 使 用 <colgroup> 标 签 对 表格 中 的 列 进行 控制 , 使 用 <col> 标 签 对 有 具体 的 列 进行 控制 。 

例 6.05 本 实例 使 用 <colgroup> 列 分 组 标签 ， 制作 了 一 个 学 生 练 习 表 格 ， 并且 对 列 进行 样式 控制 。 
首先 使 用 <table> 表 格 标签 ， 创 建 了 一 个 表格 框架 ， 然 后 通过 <tr> 行 标签 和 <td> 单 元 格 标签 ， 完 成 学 生 联 
系 表 的 制作 ， 最 后 使 用 <colgroup> 标 签 ， 对 每 一 列 单元 格 内 容 进行 颜色 设置 ， 具 体 代码 如 下 。( 实例 位 
置 : 资源 包 \ 源 码 \06\6.05 ) 
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01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<!- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!- 指 定 页 头 信息 -> 

07 ”<title> 表 格 分 组 </title> 

08 </head> 

09 <body style="background-image:url(images/bg.png)"> 
10 ”<h1 align="center"> 学 生 联系 方式 </h1> 

11 ”<!-<table> 为 表格 标记 -> 

12 <table align="center" border="1px" cellpadding="10%" > 
13 <!-- 使 用 <colgroup> 标 签 进行 表格 分 组 控制 -> 

14 <colgroup> 

45 <col style="background-color: #7efS5ff"> 
16 <col style="background-color: #B8E0D2"> 
17 <col style="background-color: #D6EADF"> 
18 <col style="background-color: #EAC4D5"> 
19 </colgroup> 

20 <!-- 表 头 信息 -> 

pa <tr> 

22 <th> 姓 名 </th> 

23 <th> 住 所 </th> 

24 <th> 联 系 电话 </th> 

25 <th> 性 别 </th> 

26 </tr> 

27 <!-- 学 生 内 容 -> 

28 <tr align="center"> 

29 <td> 张 刚 </td> 

30 <td> 男 生 公 寓 208 室 </td> 

31 <td>131***7845</td> 

32 <td> 男 </td> 

33 </tr> 

34 < 学 生 内 容 --> 

35 <tr align="center"> 

36 <td> 李 凤 </td> 

了 <td> 女 生 公寓 208 室 </td> 

38 <td>187****9545</td> 

39 <td> 女 </td> 

40 </tr> 

41 <!-- 省 略 部 分 代码 --> 

42 </table> 

43 </body> 

44 </html> 

运行 效果 如 图 6.6 所 示 。 


第 6 章 表格 与 <div> 标 签 


图 6.6 学 生 联系 方式 的 界面 效果 


6.3 <div> 标签 


<div> 标 签 是 用 来 为 HTML 文档 的 内 容 提供 结构 和 背景 的 元 素 。<div> 开 始 标签 和 </div> 结 束 标签 
之 间 的 所 有 内 容 都 是 用 来 构成 这 个 块 的 ， 其 中 所 包含 标签 的 特性 由 <div> 标 签 中 的 属性 来 控制 ， 或 者 是 
通过 使 用 样式 表格 式 化 这 个 块 来 进行 控制 。 


6.3.1 <div> 标 签 的 介绍 


div 全 称 division， 意 为 “分 隔 ”。<div> 标 签 被 称 为 分 隔 标签 ， 表 示 一 块 可 以 显示 HTML 的 区 域 ， 
用 于 设置 字 、 图 片 、 表 格 等 的 摆 放 位 置 。<div> 标 签 是 块 级 标签 ， 需 要 结束 标签 </div>。 


NGC 名 四 
块 级 标签 又 名 块 级 元 素 (block element) ， 与 其 对 应 的 是 内 联 元 素 (inline element) ， 也 叫 行 
， 内 标签 ， 它 们 都 是 HTML 规范 中 的 概念 。 在 本 章 疑难 解答 小 节 中 对 其 有 具体 的 解释 。 


语法 格式 如 下 。 


01 <div> 
| 
03 </div> 


例 6.06 本 实例 中 使 用 <div> 标 签 ， 对 内 容 进行 分 组 ， 制 作 古 诗 一 首 。 首 先 通 过 <p> 段 落 标签 ， 完 
成 古诗 内 容 ， 然 后 将 古诗 标题 和 古诗 内 容 分 成 两 组 ， 便 于 后 期 维护 管理 ， 使 用 <div> 标 签 ， 放 在 古诗 内 
容 的 最 外 层 ， 具 体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \06\6.06 ) 

01 <!IDOCTYPE html> 

02 ”<html> 


03 <head> 
04 ”<!- 指 定 页 面 编码 格式 --> 


05 
06 
07 
08 
09 
10 
Rll 
12 
13 
14 
15 
16 
17 
18 
19 
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<meta charset="UTF-8"> 

<!- 指 定 页 头 信息 -> 

<title> 多 标签 分 组 --div</title> 

</head> 

<!- 插 入 古诗 背景 图 片 -> 

<body style="background:url(images/bg.jpg) no-repeat "> 
<!- 使 用 div 标签 对 多 个 p 标签 进行 分 组 -> 
<div align="right"> 

<p> 铀 禾 日 当 午 ， 汗 滴 禾 下 土 。</p> 
<p> 谁 知 盘 中 餐 ， 粒 粒 氏 辛 苦 。</p> 
</div> 

<!- 不 属于 div 分 类 标签 的 ， 未 进行 分 组 一 > 
<p align="right">-- 古 诗 --</p> 

</body> 

</html> 


运行 效果 如 图 6.7 所 示 。 


a 
Wm 


6337/06/indexhtml 立 | 阁 国 @ 


将 两 个 <p> 段 落 标 
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6.7 活用 文字 装饰 的 页 面 效果 


6.3.2 <div> 标 签 的 应 用 


的 属性 。 
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在 应 用 <div> 标 签 之 前 ， 首 先 来 了 解 <div> 标 签 的 属性 。 在 页 面 加 入 层 时 ， 会 经 常 应 用 到 <div> 标 签 


语法 格式 如 下 。 


01 
02 


回 
回 


回 
回 


<div id="value" align="value" calss="value" style="value"> 
</div> 


id: <div> 标 签 的 id 也 可 以 说 是 它 的 名 字 , 常 与 CSS3 样式 相 结 合 , 实现 对 网 页 中 元 素 的 控制 。 
align: 用 于 控制 <div> 标 签 中 的 元 素 的 对 齐 方 式 ， 其 值 可 以 是 left、center 和 right， 分 别 用 于 


设置 元 素 的 居 左 、 居 中 和 居 右 对 齐 。 
class: 用 于 设置 <div> 标 签 中 的 元 素 的 样式 。 其 值 为 CSS3 样式 中 


的 class 选择 符 。 


style: 用 于 设置 <div> 标 签 中 的 元 素 的 样式 。 其 值 为 CSS3 属性 值 ， 各 属性 值 应 用 分 号 分 隔 。 

例 6.07 本 实例 使 用 <div> 标 签 , 完成 一 个 个 人 简历 。 首先 不 使 用 <div> 标 签 , 通过 <h1> 标 签 和 <h5> 
标签 显示 个 人 简历 ， 然 后 使 用 <div> 标 签 将 “个 人 信息 ”和 “教育 背景 ”进行 分 组 ， 可 以 更 好 对 分 组 内 
容 进行 样式 控制 等 ， 具 体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \06\6.07 ) 
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<!IDOCTYPE html> 
<html> 
<head> 
<!- 指 定 页 面 编码 格式 --> 
<meta charset="UTF-8"> 
<!- 指 定 页 头 信息 --> 
<title>div 标签 -个 人 简历 </title> 
</head> 
<!- 插 入 背景 图 片 -> 
<body style="background-image:url(images/bg.jpg) "> 
<br/><br/><br/><br/> 
<!-- 使 用 div 标签 进行 分 组 -> 
<div> 
<h1><img src="images/1.png">&nbsp; 个 人 信息 (Personal Info) </h1> 
<hr/> 
<h5> 姓 名 : 李刚 。 &nbspi&nbsp; 出 生年 月 : 1996.05</h5> 
<h5> 民 族 : 汉 &nbsp;&nbsp;&nbsp; 身 高 ; 177cm</h5> 
</div> 
<br> 
<!-- 使 用 div 标签 进行 分 组 -> 
<div> 
<h1><img src="images/2.png">&nbsp; 教 育 背 景 (Education) </h1> 
<hr/> 
<h5>2005.07-2009.06 &nbsp;&nbsp; 师 范 大 学 。”&nbsp;&nbsp; 市 场 营 销 (本 科 ) </h5> 
<h5>2009.07-2012.06 &nbsp;&nbsp; 师 范 大 学 ”&nbsp;&nbsp; 电 子 商 务 〈 研 究 生 ) </h5> 
<h5>2012.07-2015.06 &nbsp;&nbsp; 师 范 大 学 ”&nbsp;&nbsp; 电 子 商 务 〈 博 士 ) </h5> 
</div> 
</body> 
</html> 


运行 效果 如 图 6.8 所 示 。 


le eh EN 
国 dr 

G Diocalhost 1 昌 三 
se 
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回 个 人 信息 (Personal Info) 


此 名: 可 有 |。 出 生年 月 - 1906.05 


he bi 


@ 教育 背景 (Education) 


2085.07 2009 06。 项 落 大 学 。。 市场 芝 渍 (证 科 }》 


2009.0T-2012.06 。 病 范 大 学 。。 电子 到 务 (研究 生 ) 


2012.07-2015. 06 。。 师 革 大 学 。。 电子 商务 (博士 ) 


图 6.8 个 人 简历 的 界面 效果 
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6.4 ”<span> 标 签 


视频 讲解 


HTML 只 是 赋予 内 容 的 手段 ， 大 部 分 HTML 标签 都 有 其 意义 (如 <p> 标 签 创建 段落 、<h1> 标 签 创 
建 标题 等 )， 然 而 <span> 和 <div> 标 签 似乎 没有 任何 内 容 上 的 意义 ， 但 实际 上 ， 与 CSS 结合 起 来 后 ， 应 
用 范围 就 非常 广泛 。 


6.4.1 ” <span> 标签 的 介绍 


<span> 标 签 和 <div> 标 签 非常 类 似 ， 是 HTML 中 组 合用 的 标签 ， 可 以 作为 插入 CSS 这 类 风格 的 容 


器 ， 或 插入 class、id 等 语法 内 容 的 容器 。 
语法 格式 如 下 。 
01 <span> 
02 
03 </span> 


例 6.08 本 实例 使 用 <span> 标 签 ， 实 现 一 个 “我 爱 你 ”各 国语 言 版 本 的 便签 。 首 先 通 过 <p> 段 落 
标签 将 便签 的 内 容 显示 出 来 ， 然 后 在 <p> 标 签 内 部 使 用 <span> 标 签 ， 将 需要 单独 分 组 的 内 容 放 入 <span> 
标签 中 ， 进 行 样式 控制 ， 具 体 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \06\6.08 ) 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<!- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!- 指 定 页 头 信息 -> 

07 ”<title> 单 标签 分 组 --span</title> 

08 </head> 

09 ”<!- 插 入 背景 图 片 --> 

10 <body style="background:url(images/bg.jpg) no-repeat "> 

11 ”<!- 界 面 样式 控制 -> 

12 <br><br><br><br><br><br><br><br><br><br><br> 

13 ”<!- 使 用 <span> 标 签 对 单 标签 进行 分 组 --> 

14 ”<p><span style="colorred">“ 我 爱 你 ”</span> 这 句 话 ， 不 同 的 语言 是 怎么 说 的 呢 ? 
15 ”英语 中 是 <span style="color:red">"| love you"</span>， 

16 ”日 语 中 是 <span style="color:red">" 阿 娜 塔 农 扣 头 啊 西 戴 斯 "</span>， 
17 ”韩语 中 是 <span style="colorred">" 擦 哪 嘿 "</span>。</p> 


18 </body> 
19 </html> 
运行 效果 如 图 6.9 所 示 。 
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"“ 找 沟 你 ”这 人 句 话 ， 不 同 的 i 
头 啊 西 戴 斯 " ， 韩 语 中 旦 " 控 


是 怎么 说 的 呢 ? 英语 中 是 "TIlove you", 日 语 中 是 " 阿 娜 塔 农 可 


| 


6.9 ”使 用 段落 标签 的 界面 效果 


6.4.2 ”<span> 标 签 的 应 用 


<span> 标 签 是 行内 标签 ，<span> 标 签 的 前 后 不 会 换行 ， 它 没有 结构 的 意义 ， 纯 粹 是 应 用 样式 ， 当 
其 他 行内 元 素 都 不 合适 时 ， 请 使 用 <span> 标 签 。 


NG 人 


关于 <span> 标 签 和 <div> 标 签 的 区 别 ， 请 参考 本 章 难 点 解答 部 分 的 内 容 。 


例 6.09 本 实例 使 用 <span> 标 签 ， 实 现 一 则 公司 介绍 短文 。 首 先 使 用 <table> 标 签 ， 创 建 一 个 表格 
框架 ， 然 后 使 用 <p> 段 落 标签 ， 显 示 公司 介绍 短文 ， 然 后 通过 <span> 标 签 ， 将 短文 中 的 内 容 进 行 分 组 ， 
强调 的 内 容 显示 为 红色 或 是 链接 等 ， 具 体 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \06\6.09 ) 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<!-- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 ”<!-- 指 定 页 头 信息 -> 

07 ”<title>span 应 用 </title> 

08 </head> 

09 “<!- 插 入 背景 图 片 -> 

10 <body style="background:url(images/bg.jpg) no-repeat "> 

11 ”<!- 界 面 样式 控制 -> 

12 <br><br><br><br><br><br><br> 

13 ”<!-- 使 用 <span> 标 签 对 单 标签 进行 分 组 --> 

14 <p><span style="font-size: 24px;color: red"> 明 日 学 院 </span>， 

15 ”是 吉林 省 明日 科技 有 限 公 司 倾 力 打造 的 在 线 实用 技能 学 习 平台 ， 

16 ”该 平台 于 2016 年 正式 上 线 ， 主 要 为 学 习 者 提供 海量 、 优 质 的 <span> 

17 ”<a href="http://www.mingrisoft.com/selfCourse.html"> 课 程 </a></span>， 课 程 结构 严 谨 ， 
18 ”用 户 可 以 根据 自身 的 学 习 程 度 ， 

19 ”自主 安排 学 习 进 度 。<span style="color:black"><b> 我 们 的 宗旨 是 ， 为 编程 学 习 者 提供 一 站 式 服务 ， 
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20 ”培养 用 户 的 编程 思维 。</b></span></p> 


21 </body> 
22 </html> 


运行 效果 如 图 6.10 所 示 。 


改变 字体 颜色 


图 610 段落 换行 标签 的 页 面 效果 
6:5 小 结 


本 章 介 绍 了 简单 表格 的 制作 和 表 头 的 设置 , 表格 的 样式 、 合并 和 分 组 <div> 标签 的 介绍 以 及 使 用 ， 
<span> 标 签 的 介绍 以 及 使 用 。 通 过 本 章 的 学 习 ， 可 以 利用 <table> 表 格 标签 制作 多 种 多 样 、 丰 富 多 彩 的 
表格 ， 也 可 以 使 用 <div> 标 签 和 <span> 标 签 对 内 容 进 行 更 好 的 分 组 ， 进 行 多 种 样式 控制 。 


6.6 实 战 


6.6.1 实战 一 : 制作 每 日 工作 计划 表 

试 着 利用 <td> 标 签 中 的 rowspan 属性 ， 完 成 一 个 每 日 工作 计划 表 。( 资源 包 \ 源 码 \06\ 实 战 \01) 
6.6.2 ”实战 二 : 实现 网 页 版 工作 总 结 

试 着 使 用 <div> 标 签 ， 完 成 一 段 工 作 总 结 。( 资源 包 \ 源 码 \06\ 实 战 \02 ) 
6.6.3 ”实战 三 : 制作 一 则 公司 公告 


试 着 使 用 <span> 标 签 ， 完 成 一 则 公司 公告 。( 资源 包 \ 源 码 \06\ 实 战 \03 ) 


ze 

第 草 
列表 
( 器 视频 讲解 : 1 分 钟 ) 


本 节 学 习 HTML5 中 的 列表 元 素 ， 列 表 形 式 在 网 站 设计 中 占有 比较 大 的 比重 ， 
可 以 使 页 面 上 的 信息 整齐 直观 地 显示 出 来 ， 便 于 用 户 理解 。 在 后 面 的 学 习 中 将 会 大 
量 使 用 到 列表 元 素 的 高 级 运用 。 

学 习 摘 要 : 

”列表 的 标签 

MW 无 序列 表 

# 有 序列 表 

WI 列表 的 岩 套 
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7.1 列表 的 标签 


两 种 类 型 ， 一 种 是 有 序列 表 ， 另 一 种 是 无 序列 表 。 前 者 是 使 用 编号 来 记录 项 目的 顺序 ， 
而 后 者 则 用 项 目 符号 来 标记 无 序 的 项 目 。 

所 谓 有 序列 表 ， 是 指 按照 数字 或 字母 等 顺序 排列 列表 项 目 ， 如 图 7.1 所 示 的 列表 。 

所 谓 无 序列 表 ， 是 指 以 @、O 〇 、YV、 信 等 开头 的 ， 没 有 顺序 的 列表 项 目 ， 如 图 7.2 所 示 的 列表 。 


| 2 Em 


FMweMYindexh P ~ GX | 全 有 要 
ET 


1 实例 1 


2 实例 2 


。 实 例 1 


。 详 例 2 


图 7.1 有 序列 表 图 7.2 无 序列 表 
关于 列表 的 主要 标签 ， 如 表 7.1 所 示 。 
表 7.1 列表 的 主要 标签 


列表 项 目的 标签 


72 无 序列 表 


在 无 序列 表 中 ， 各 个 列表 项 之 间 没 有 顺序 级 别 之 分 ， 它 通常 使 用 一 个 项 目 符号 作为 每 个 列表 项 的 
前 缀 。 无 序列 表 主 要 使 用 <ul>、<dir>、<dl>、<menu>、<li> 几 个 标签 和 type 属性 。 


7.2.1 无 序列 表 标签 


无 序列 表 的 特征 在 于 提供 一 种 不 编号 的 列表 方式 ， 而 在 每 一 个 项 目 文字 之 前 ， 以 符号 作为 分 项 
标识 。 

具体 语法 如 下 。 

01 <ul> 


02 <I> 第 1 项 </li> 
03 <l> 第 2 项 </> 
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在 前 面 的 语法 中 , 使 用 <ul> 和 </ul> 标 签 表示 这 一 个 无 序列 表 的 开始 和 结束 , 而 <li> 则 表示 这 是 一 个 
列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 。 

例 7.01 使 用 无 序列 定义 编程 词典 的 模式 分 类 ， 新 建 一 个 HTML5 文件 ， 文 件 的 具体 代码 如 下 。 
( 实例 位 置 : 资源 包 \ 源 码 \07\7.01 ) 


01 <html> 

02 <head> 

03 <meta charset="utf-8"> 

04 <title> 创 建 无 序列 表 </title> 
05 </head> 

06 <body> 

07 ”<font size="+3" color="#0066FF"> 编 程 词典 的 模式 分 类 : </font><br/><br/> 
08 <ul> 

09 <Ii> 入 门 模式 </li> 

10 <Ii> 初 级 模式 </li> 

fl <Ii> 中 级 模式 </li> 

12 </ul> 

13 </body> 

14 </html> 


保存 并 运行 这 段 代码 ， 可 以 看 到 窗口 中 建立 了 一 个 无 序列 表 ， 该 列表 共 包 含 3 个 列表 项 ， 如 图 7.3 
所 示 。 


编程 词典 的 模式 分 类 : 


图 73 创建 无 序列 表 
7.2.2 无 序列 表 属 性 


默认 情况 下 ， 无 序列 表 的 项 目 符号 是 @， 而 通过 type 参数 可 以 调整 无 序列 表 的 项 目 符号 ， 避 免 列 
表 符 号 的 单调 。 

具体 语法 如 下 。 

01 ”<ultype= 符 号 类 型 > 

02 <Ii> 第 1 项 </li> 

03 <Ii> 第 2 项 </li> 

05 </u> 


在 上 面 的 语法 中 ， 无 序列 表 其 他 的 属性 不 变 ，type 属性 则 决定 了 列表 项 开始 的 符号 。 它 可 以 设置 
的 值 有 3 个 ， 如 表 7.2 所 示 。 其 中 disc 是 默认 的 属性 值 。 
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表 7.2 无 序列 表 的 符号 类 型 


列表 项 目的 符号 


例 7.02 新 建 一 个 HIMLS 文件 ， 在 文件 的 <body> 标 签 中 输入 代码 ， 有 具体 代码 如 下 。( 实例 位 置 : 
资源 包 \ 源 码 \07\7.02 ) 


01 <body> 

02 <divclass="box"> 

03 <divclass="item"> 

04 <a href="#"><img src="'images/2.jpg'/></a> 
05 <p><a href="#"> 小 米 官网 手机 </a></p> 

06 <div class="eval"> 超 好 用 ， 比 我 用 过 的 耳机 都 好 ， 声 音 简直 是 从 脑子 里 发 出 的 </div> 
07 </div> 

08 ”<!-- 此 处 代码 与 上 面 类 似 ， 省 略 --> 

09 

10 <div class=""><div> 

11 

位 

13 </div> 

14 

15 </body> 


4 
C5 培 明 
在 上 面 的 代码 中 ， 为 了 控制 页 面 布 局 和 字体 的 样式 ， 应 用 了 CSS3 样式 ， 其 中 应 用 的 CSS3 样 
式 表 文件 的 具体 代码 请 参见 资源 包 \Code\SL\07\02。 


运行 上 面 的 代码 ,可 以 看 到 项 目 符号 属性 可 以 设置 为 none， 此 时 项 目 符号 就 不 显示 出 来 ,如 图 7.4 
所 示 。 


COizool | 


小 六 风机 小 半 守 网 手机 小 沙宣 隐 手 机 小 米 定 网 手机 


图 7.4 设置 无 序列 表 项 目 符号 
无 序列 表 的 类 型 定义 也 可 以 在 <li> 项 中 ， 其 语法 是 <li type= 符 号 类 型 >， 这 样 定义 的 结果 是 对 单个 
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项 目 进 行 定义 ， 具 体 代 码 如 下 。 


01 <html> 

02 <head> 

03 <title> 创 建 无 序列 表 </title> 

04 </head> 

05 <body> 

06 ”<font size="+3" color="#00FF99"> 明 日 科技 部 门 分 布 : </font><br/> 
07 <ul> 

08 <litype="circle"> 图 书 开 发 部 </li> 

09 <litype="disc"> 软 件 开发 部 </li> 

10 <litype="square"> 质 量 部 </li> 


11 </ul> 
12 </body> 
13 </html> 
运行 上 面 的 代码 ， 运 行 效果 如 图 7.5 所 示 。 
= 
| em rr 一 


ET 


7.5 设置 不 同 的 项 目 符号 


73 有 序列 表 


有 序列 表 通 常用 来 表示 内 容 之 间 的 顺序 或 者 是 重要 性 关系 ， 每 一 个 列表 都 分 为 多 个 子 项 ， 每 一 个 
子 项 都 有 相应 的 编号 。 


7.3.1 有 序列 表 标 签 
有 序列 表 使 用 编号 ， 而 不 是 项 目 符号 来 编排 项 目 。 列 表 中 的 项 目 采 用 数字 或 英文 字母 开头 ， 通 党 


各 项 目 间 有 先后 的 顺序 性 。 在 有 序列 表 中 ， 主 要 使 用 <ol> 和 <li> 两 个 标签 以 及 type 和 start 两 个 属性 。 
具体 语法 如 下 。 


01 <ol> 

02 <Ii> 第 1 项 </li> 
03 <li> 第 2 项 </> 
04 <li> 第 3 项 < 中 > 
05 

06 </ol> 


在 上 面 的 语法 中 , <ol> 和 </ol> 标 签 标志 着 有 序列 表 的 开始 和 结束 ,而 <li> 标 签 表示 这 是 一 个 列表 项 
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的 开始 ， 默 认 情 况 下 ， 采 用 数字 序号 进行 排列 。 
例 7.03 运用 有 序列 表 输 出 古诗 ， 具 体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \07\7.03 ) 


01 </html> 
02 <head> 
<title> 创 建 有 序列 表 </title> 
04 </head> 
05 <body> 
06 <font size="+4" color="#CC6600"> 江 雪 </font><br/> 
07 <ol> 
<I 户 千 山 鸟 飞 绝 </li> 
<li> 万 径 人 踪 灭 </li> 
<Ii> 孤 舟 著 答 翁 </li> 
<li> 独 钓 寒 江 雪 < 川 > 
12 </ol> 


03 


08 
09 
10 
11 


13 </body> 


14 </html> 


运行 上 面 的 代码 ， 可 以 看 到 有 序列 表 前 面包 含 了 顺序 


号 ， 如 图 7.6 所 示 。 


国 和 多 学 

默认 情况 下 , 有 序列 表 中 的 列表 项 采用 数字 序号 进行 

排列 ， 如 果 需 要 将 列表 序号 改 为 其 他 类 型 ， 例 如 ， 以 英文 
字母 开头 ， 就 需要 改变 type 属性 。 


两 招 


7.6 运用 有 序列 表 输 出 诗词 


7.3.2 ”有 序列 表 属性 


默认 情况 下 ， 有 序列 表 的 序号 是 数字 的 ， 通 过 type 属性 可 以 调整 序号 的 类 型 ， 例 如 ， 将 其 修改 成 


字母 等 。 
具体 语法 如 下 。 
01 ”<ol type= 序 号 类 型 > 
02 <li> 第 1 项 < 中 > 
03 <Ii> 第 2 项 </li> 
04 <Ii> 第 3 项 </li> 
05 2 
06 </o> 
在 上 面 的 语法 中 ， 序 号 类 型 可 以 有 5 种 ， 如 表 7.3 所 示 。 


表 7.3 有 序列 表 的 序号 类 型 
列表 项 目的 序号 类 型 


数字 1,2 
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小 写 英文 字母 a.b.c.d.… 


续 表 
type 取 值 列表 项 目的 序号 类 型 
A 大 写 英文 字母 A,B,C.D..… 
i 小 写 罗马 数字 iiiiiii 


大 写 罗马 数字 LILIILIV.… 


例 7.04 新 建 一 个 HTML5 文件 ， 使 用 有 序列 表 制 作 一 个 商城 页 面 ， 在 <body> 标 签 中 添加 如 下 代 


码 。( 实例 位 置 : 资源 包 \ 源 码 \07\7.04 ) 


<body> 
<div class="mr-box"> 
<ol> 


<li><img src="images/1.jpg"> 海 外 购 .日 本 上 线 。 跨 境 直 邮 </li> 
<li><img src="images/2.jpg"> 英 美 复活 节 折 扣 季 国际 大 牌 免 邮 </li> 
<! 一 此 处 代码 和 上 文 代码 相似 ， 省 略 --> 


</ol> 
</div> 
</body> 


为 上 面 的 HTML 代码 添加 CSS 样式 ， 代 码 如 下 。 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 


I 


list-style: none; 

width: 158px; 

height: 55px; 

float: left; 
background: #949494; 
margin-top: 300px; 
margin-left: 2px; 


font-family: "微软 雅 黑 "; 


font-size: 14px; 
text-indent: 2em; 
text-align: center; 
line-height: 20px; 
color: #fff; 
padding-top: 10px; 
} 
liimg{ 
position: absolute; 
top: 0; 
left: 0; 
display: none; 


liihover img{ 
display: block; 


liihover{ 
background: orange; 


} 


/页 面 中 的 1i 样 式 */ 


/* 缩 进 32px*/ 


人 * 设 置 内 边 距 */ 


/设置 定位 方式 儿 


A 鼠标 滑 过 时 的 样式 */ 
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保存 文件 ， 运 用 谷歌 浏览 器 打开 该 文件 ， 将 显示 使 有 序列 表 制 作 的 商城 页 面 ， 效 果 如 图 7.7 所 示 。 


图 7.7 有 序列 表 制作 商城 页 面 


和 注意 
如 果 开 发 过 程 中 不 需要 有 序列 表 的 序号 时 ， 只 需要 将 有 序列 表 的 列表 项 目的 序号 类 型 为 none 
就 行 ， 也 可 以 将 列表 的 list-style 属性 设置 为 none 即 可 。 


7.4 ”列表 的 嵌 套 


嵌 套 列表 指 的 是 多 于 一 级 层次 的 列表 ， 一 级 项 目下 面 可 以 存在 二 级 项 目 、 三 级 项 目 等 。 项 目 列表 
可 以 进行 颈 套 ， 以 实现 多 级 项 目 列表 的 形式 。 


7.4.1 ”定义 列表 的 谋 套 


定义 列表 是 一 种 两 个 层次 的 列表 ， 用 于 解释 名 词 的 定义 ， 名 词 为 第 一 层次 ， 解 释 为 第 二 层次 ， 并 
且 不 包含 项 目 符号 。 
具体 语法 如 下 。 


01 <dl> 

02 <dt> 名 词 一 </dt> 
03 <dd> 解释 1</dd> 

04 ”<dd> 解释 2</dd> 

05 <dd> 解释 3</dd> 

06 <dt> 名 词 二 </dt> 
07 <dd> 解释 1</dd> 

08 <dd> 解释 2</dd> 

09 ” ”<dd> 解释 3</dd> 


11 </d> 
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在 定义 列表 中 ， 一 个 <de> 标 签 下 可 以 有 多 个 <dd> 标 签 作为 名 词 的 解释 和 说 明 ， 以 实现 定义 列表 的 
嵌 套 。 

例 7.05 在 这 个 实例 中 ， 定 义 列表 的 第 一 层 用 于 放置 标题 ， 诗 句 内 容 是 第 二 层次 ， 并 且 不 包含 项 
目 符号 ， 有 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \07\7.05 ) 


01 <html> 

02 <head> 

03 <title> 定 义 列表 嵌 套 </title> 

04 </head> 

05 <body> 

06 ”<font color="#00FF00" size="+2"> 古 诗 介绍 </font><br /><br/> 
07 <d> 

08 <dt> 赠 孟浩然 </dt><br/> 

09 <dd> 作 者 : 李白 </dd><br/> 

10 <dd> 诗 体 : 五 言 律诗 </dd><br/> 

11 <dd> 吾 爱 孟 夫子 ， 风 流 天 下 闻 。<br/> 


12 红颜 弃 轩 园 ， 白 首 卧 松 云 。<br/> 
13 醉 月 频 中 圣 ， 迷 花 不 事 君 。<br/> 
14 高 山 安 可 仰 ? 徒 此 握 清 芬 。<br/> 
15 </dd> 


16 <dt> 蜀 相 </dt><br> 

他 <dd> 作 者 : 杜甫 </dd><br/> 

18 <dd> 诗 体 : 七 言 律诗 </dd><br/> 

19 <dd> 和 丞相 祠堂 何 处 寻 ? 锦 官 城 外 柏 森 森 ，<br/> 


20 映 阶 匠 草 自 春色 ， 隔 叶 黄酮 空 好 音 。<br/> 
| 三 顾 频 烦 天 下 计 ， 两 朝 开 济 老臣 心 。<br/> 
22 出 师 未 捷 身 先 死 ， 长 使 英雄 泪 满 襟 。<br/> 
23 </dd> 

24 </body> 

25 -</html> 


运行 上 面 的 代码 ， 运 行 效 果 如 图 7.8 所 示 。 


图 7.8 定义 列表 的 嵌 套 
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7.4.2 无 序列 表 和 有 序列 表 的 嵌 套 


常见 的 列表 嵌 套 模式 就 是 有 序列 表 和 无 序列 表 的 藤 套 , 可 以 重复 地 使 用 <ol> 和 <ul> 标 签 组 合 实现 。 
例 7.06 下 面 的 代码 就 是 利用 无 序列 表 和 有 序列 表 制 作 的 商品 导航 栏 ， 代 码 如 下 。( 实例 位 置 : 资 
源 包 \ 源 码 \07\7.06 ) 


01 <ul> 

02 <li class="mr-hover"><a href="#"> 商 品 分 类 </a> 

03 <ol> 

04 <div class="mr-item"> 

05 <ol> 

06 <li><a href="#"> 女 装 /内 衣 </a></li> 
07 <li><a href="#"> 男 装 /运动 户外 </a></li> 
08 </ol> 

09 <!- 此 处 代码 与 上 面 类 似 --> 

10 </div> 

11 </ol> 

12 </li> 

13 <li class="mr-hover"><a href="#"> 春 节 特 卖 </a> 

14 <ul> 

15 <div class="mr-shopbox"> 

16 <ul> 

17 <li><a href="#"> 服 装 服饰 </a></li> 
18 <li><a href="#"> 母 婴 会 场 </a></li> 
19 <!- 此 处 代码 与 上 面 类 似 --> 

20 </ul> 

21 </div> 

22 </ul> 

23 </li> 

24 <li class="mr-hover"><a href="#"> 会 员 </a></li> 

25 <li class="mr-hover"><a href="#"> 电 器 城 </a></li> 
26 <li class="mr-hover"><a href="#'> 天 猎 会 员 </a></li> 
27 </ul> 


为 了 控制 页 面 的 样式 ， 在 这 里 运用 CSS3 样式 ， 代 码 如 下 。 


01 /商品 分 类 子 导航 栏 */ 
02 .mr-item li{ 
03 width: 100%; 


05 ee lia{ /目的 所 有 子 元 素 a 的 样式 */ 
06 font-size: 14px; 

07 font-family: "微软 雅 黑 "; 

08 color: #000; 

09 } 

10 .mr-item li:hover { F* 鼠 标 滑 过 1i 时 的 样式 */ 

11 background: #ff; 
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12 

13 .mr-item li ahover{ /* 鼠 标 滑 过 a 时 的 样式 */ 
14 color #DD2727 

15 


了 
16 ”/* 春 节 特 卖 子 导航 */ 
17 .mr-shopboxlia{ 
18 text-decoration: none; 
19 COLOR: #FFF:; 
20 font-size: 14px; 
21 font-family: "宋体 "; 
220 


p94 
NC 说 明 
在 上 面 的 代码 中 ， 为 了 控制 页 面 布局 和 字体 的 样式 ， 应 用 了 CSS3 样式 ， 应 用 的 CSS3 样式 表 
文件 的 具体 代码 请 参见 资源 包 \Code\SL\07\06。 


运行 上 面 的 代码 ， 可 以 得 到 无 序列 表 和 有 序列 表 嵌 套 制作 的 商城 页 面 ， 运 行 效果 如 图 7.9 所 示 。 


= Se 4 We 和 一: 一 | 
DD 无 闻 列 地 和 有 序列 Ex 

| 站 dexhtm [下 :| 
股 革 取信 
二 要 2 场 | 
数码 夫 电 
EE “ve@ ou 
和 ES 
进口 尖 洁 
[= 


图 7.9 无 序列 表 和 有 序列 表 相互 嵌 套 的 实例 
3 站 结 


本 章 主 要 介绍 了 多 种 列表 标签 ， 以 及 详细 介绍 无 序列 表 和 有 序列 表 的 属性 和 使 用 方法 ， 并 以 实例 
的 形式 对 列表 进行 了 详细 讲解 。 学 习 完 本 章 后 ， 读 者 可 以 对 HIML5 的 列表 有 一 个 详细 的 了 解 ， 熟练 
地 掌握 列表 标签 ， 可 以 对 网 页 的 布局 有 一 定 的 帮助 。 列 表 是 一 种 非常 实用 的 数据 排列 方式 ， 它 以 条 列 
式 的 模式 显示 数据 ， 使 用 户 能 够 一 目 了 然 。 
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7.6 实 战 


7.6.1 实战 一 : 制作 网 站 购买 提示 内 容 

试 着 运用 无 序列 表 制 作 网 站 上 购买 提示 内 容 。( 资源 包 \ 源 码 \07\ 实 战 01) 
7.6.2 实战 二 : 制作 QQ 联系 人 列表 

试 着 运用 有 序列 表 制作 QQ 联系 人 列表 部 分 内 容 。( 资源 包 \ 源 码 \07\ 实 战 2 ) 
7.6.3 实战 三 : 制作 商品 列表 内 容 


试 着 在 运用 有 序列 表 电 商 网 站 的 商品 页 面部 分 内 容 。( 资源 包 \ 源 码 \07\ 实 战 \03 ) 
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第 章 


表单 
( 僵 视频 讲解 : 42 分 钟 ) 


表单 的 用 途 很 多 ， 在 制作 网 页 ， 特 别 是 制作 动态 网 页 时 常常 会 用 到 。 表 单 主要 
用 来 收集 客户 端 提 供 的 相关 信息 ， 使 网 页 具有 交互 的 功能 ， 它 是 用 户 与 网 站 实现 交 
互 的 重要 和 手段。 在 网 页 的 制作 过 程 中 ， 常 常 需要 使 用 表单 ， 本 章 重点 介绍 表单 中 各 
标签 的 使 用 。 

学 习 摘 要 : 

Wm 表单 概述 

让 输入 标签 

Wm 文本 域 和 列表 
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8.1 表单 概述 


表单 的 用 处 很 多 ， 在 网 站 中 无 处 不 见 ， 例 如 ， 在 进行 用 户 注册 时 ， 就 必须 通过 表单 填写 用 户 的 相 
关 信 息 。 本 节 主 要 介绍 表单 的 概念 和 用 途 ， 并 且 介 绍 了 <form> 标 签 的 属性 及 其 含义 ， 最 后 ， 通 过 举例 
向 读者 介绍 表单 标签 <form> 的 实际 应 用 。 


8.1.1 概述 


表单 通常 设计 在 一 个 HIML 文档 中 ， 当 用 户 填 写 完 信息 后 做 提交 操作 ， 将 表单 的 内 容 从 客户 端的 
浏览 器 传送 到 服务 器 上 ， 经 过 服务 器 处 理 程序 后 ， 再 将 用 户 所 需 信息 传 回 客户 端的 浏览 器 上 ， 这 样 网 
页 就 具有 了 交互 性 。HTML 表单 是 用 户 与 网 站 实现 交互 的 重要 手段 。 

表单 的 主要 功能 是 收集 信息 ， 具 体 说 是 收集 浏览 者 的 信息 。 例 如 ， 天 猫 商城 的 用 户 登录 界面 ， 就 
是 通过 表单 填写 用 户 的 相关 信息 的 ， 如 图 8.1 所 示 。 在 网 页 中 ,最 常见 的 表单 形式 主要 包括 文本 框 、 单 
选 按钮 、 复 选 框 、 按 钮 等 。 


天 猫 THALLcon 


图 8.1 用 户 登录 界面 
8.1.2 表单 标签 <form> 


表单 是 网 页 上 的 一 个 特定 区 域 。 这 个 区 域 通过 <form> 标 签 声明 ， 相 当 于 一 个 表单 容器 ， 表 示 其 他 
的 表单 标签 需要 在 其 范围 内 才 有 效 ， 也 就 是 说 ， 在 <form> 与 </form> 之 间 的 一 切 都 属于 表单 的 内 容 。 这 
里 的 内 容 可 以 包含 所 有 的 表单 控件 ， 还 有 任何 必需 的 伴随 数据 ， 如 控件 的 标签 、 处 理 数 据 的 脚本 或 程 
序 的 位 置 等 。 

在 表单 的 <form> 标 签 中 ， 还 可 以 设置 表单 的 基本 属性 ， 包 括 表单 的 名 称 、 处 理 程序 、 传 送 方式 等 。 
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其 语法 格式 如 下 。 


01 <form action=” name="”” method="" enctype="” target=""> 
02 be 
03 </form> 


在 上 述 语法 中 ， 其 属性 值 和 含义 如 表 8.1 所 示 。 
表 8.1 表单 中 form 属性 的 值 和 含义 


form 属性 含 义 说 明 

Ee 表单 的 处 理 程序 ， 也 就 是 表单 中 收集 到 的 资料 | 这 一 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 ， 还 可 
将 要 提交 的 程序 地 址 以 是 一 些 其 他 地 址 ， 如 E-mail 地 址 等 

本 为 了 防止 表单 信息 在 提交 到 后 台 处 理 程序 时 出 | 表单 的 名 称 尽量 与 表单 的 功能 相符 ， 并 且 名 称 中 不 含 
现 混乱 而 设置 的 名 称 有 空格 和 特殊 符号 


get 方法 指 表 单数 据 会 被 视 为 CGI 或 ASP 的 参数 发 送 ， 
post 方法 指 表单 数据 是 与 URL 分 开发 送 的 ， 用 户 端的 
计算 机 会 通知 服务 器 来 读 取 数 据 

text/plain 指 以 纯 文本 的 形式 传送 ; 
application/x-www-form-urlencoded 指 默认 的 编码 形式 ， 
multipart/form-data 指 MIME 编码 ， 上 传 文件 的 表单 必 
须 选 择 该 项 

target 目标 窗口 的 打开 方式 其 属性 值 和 含义 与 链接 标签 中 target 相同 


例如 ， 下 面 的 这 段 HTML 代码 就 可 以 实现 一 个 “ 甜 橙 音乐 网 ”的 登录 界面 。 


01 <divclass="mr-cont"> 


i 定义 处 理 程序 从 表单 中 获得 信息 的 方式 ， 有 get 
《默认 值 ) 和 post 两 个 值 

表单 信息 提交 的 编码 方式 。 其 属性 值 有 textplain、 
enctype application/x-www-form-urlencoded 和 multipart/ 
form-data 这 3 个 


02 <form class="form" action="login.html" method="get" target="blank"> 
03 <label class="login"> 

04 <img src="img/user.png"> 

05 <input type="text" placeholder="username"> 

06 </label> 

07 <label class="login"> 

08 <img src="img/pass.png"> 

09 <input type="password" placeholder="password"> 
10 </label> 

jj <input type="submit" value="ok" class="ok"> 

记 <input type="reset" value="clear" class="clear"> 

13 </form> 

14 </div> 

为 了 使 整体 页 面 美观 整齐 ， 使 用 CSS3 代码 改变 网 页 中 各 标签 的 样式 和 位 置 ， 具 体 CSS3 代码 如 下 。 
01 *{ 

02 margin: 0; 

03 padding: 0; 

04 3 

05 .mr-cont{ 

06 width: 715px; 

07 margin: 0 auto; 
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08 border 1px solid #00; 

09 background: url(../img/login.jpg); 
10 } 

11 .form{ 

12 width: 350px; 

3 padding: 130px 415px; 

14 } 


15 .login, .ok, .clear{ 
16 display: block; 


17 margin-top: 40px; 

18 position: relative; 

19 本 和 

20 .login img{ 

21 height: 42px; 

22 border: 1px rgba(215, 209, 209, 1.00) solid; 
23 background-color: rgba(215, 209, 209, 1.00); 
24 } 

25 .login input { 

26 position: absolute; 

27 height: 40px; 

28 width: 170px; 

29 font-size: 20px; 

30 } 

31 .ok, .clear{ 

2 width: 215px; 

33 height: 40px; 

34 border: none; 

35 background: rgba(240, 62, 65, 1.00) 

36 } 


在 上 面 的 举例 中 ， 首 先 通过 <form> 标 签 声 明 此 为 表单 模式 ， 然 后 通过 在 <form> 表 单 内 部 设置 其 表 
单 信息 的 提交 地 址 、 传 送信 息 的 方式 以 及 打开 新 窗口 的 方式 等 属性 。 最 后 在 <form> 标 签 内 部 添加 其 他 
标签 。 在 谷歌 浏览 器 中 运行 文件 ， 显 示 效 果 如 图 8.2 所 示 。 


[SEE 


乱 权 音乐 网 登录 


项 


8.2 “ 甜 橙 音乐 网 ”登录 界面 
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8.2 输入 标签 


输入 标签 是 <input> 标 签 ， 通 过 设置 其 type 的 属性 值 改 变 其 输入 方式 ， 而 不 同 的 输入 方式 又 导致 其 
他 参数 因此 而 异 。 例 如 ， 当 type 值 为 text 时 ， 其 输入 方式 为 单行 文本 框 。 根 据 输 入 方式 的 功能 ， 可 以 
将 其 分 为 文本 框 、 单 /多 选 框 、 按 钮 以 及 文件 和 图 像 域 4 大 类 , 下面 将 具体 介绍 <input> 标 签 的 使 用 方法 。 


8.2.1 


文本 框 


表单 中 的 文本 框 主要 有 两 种 ， 分 别 是 单行 文本 框 和 密码 输入 框 。 不 同 的 文本 框 对 应 的 type 属性 值 也 
不 同 , 其 对 应 的 表现 形式 和 应 用 也 各 有 差异 。 下 面 分 别 介绍 单行 文本 框 和 密码 输入 框 的 功能 和 使 用 方式 。 


4: 


单行 文本 框 


text 属性 用 来 设 定 在 表单 的 文本 框 中 输入 任何 类 型 的 文本 、 数 字 或 字母 。 输 入 的 内 容 以 单行 显示 。 
其 语法 格式 如 下 。 


加 加 回 


2 


<input type="text" name=" " size=" " maxlength=" " value=" "> 


name: 文本 框 的 名 称 ， 用 于 和 页 面 中 其 他 控件 加 以 区 别 ， 命 名 时 不 能 包含 特殊 字符 ， 也 不 能 
以 HTML 预 留 作 为 名 称 。 

size: 定义 文本 框 在 页 面 中 显示 的 长 度 ， 以 字符 作为 单位 。 

maxlength: 定义 在 文本 框 中 最 多 可 以 输入 的 文字 数 。 

value: 用 于 定义 文本 框 中 的 默认 值 。 


密码 输入 框 


在 表单 中 还 有 一 种 文本 框 为 密码 输入 框 ， 输 入 文本 域 中 的 文字 均 以 星 号 “*” 或 圆 点 “.” 显 示 , 其 
语法 格式 如 下 。 


01 


<input type="password" name="" size="" maxlength="" value="" /> 


上 面 的 语法 中 ， 各 参数 的 含义 和 取 值 与 文本 输入 框 相同 ， 此 处 不 再 重复 解释 。 
例 8.01 在 51 购 商 城 的 登录 界面 中 ,添加 文本 输入 框 和 密码 输入 框 ， 实 现 步骤 如 下 。( 实例 位 置 : 


资源 包 \ 源 码 \08\8.01 ) 

新 建 一 个 HTML 文件 ， 然 后 通过 将 <input> 标 签 的 type 属性 的 属性 值 设 置 为 text， 实 现 输入 账号 文 
本 框 ， 代 码 如 下 。 

01 <divclass="mr-cont"> 

02 <form> 

03 < 上 -使 用 label 标签 绑 定单 行文 本 框 ， 实 现 单 击 图 片 时 文本 框 也 能 获取 焦点 -> 

04 <label><img src="img/user.png"><input type="text"></label> 

05 < 上 -密码 输入 框 -> 

06 <label><img src="img/pass.png"><input type="password"></label> 
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07 
08 


新 建 一 个 CSS3 文件 ， 并 且 链 接 到 此 HTML 文件 ， 然 后 使 用 CSS3 设置 form 表单 的 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


</form> 
</div> 


具体 代码 如 下 。 
01 /页面 整 体 布局 */ 
02 .mr-cont{ 
03 width: 365px:; /整体 大 小 */ 
04 height: 375px; 
05 margin: 20px auto; 
06 border 1px solid #00; 
07 background: url(../img/4-2.png); 添加 背景 图 片 */ 
08 } 
09 ”A* 表 单 整体 位 置 "/ 
10 form{ 
3 padding: 65px 50px; 
1200y 
13 label{ 
14 color: #ff; 
15 display: block; 
16 padding-top: 10px; 
nk position: relative; 
18 } 
19 ”A* 设 置 单行 文本 框 和 密码 框 的 样式 */ 
20 label input{ 
4 | height: 25px; 
22 width: 200px; 
23 position: absolute; 
24 } 
25 label img{ 
26 height: 28px; 
7 
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在 谷歌 浏览 器 中 运行 代码 ， 效 果 如 图 8.3 所 示 。 


登录 > 
单行 输入 框 
:em 


台 作 账号 
必 aa 人 录 如 汪 登录 ”全 仙人 登 录 


图 8.3 在 页 面 中 添加 文本 框 


背景 
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4 
CO 说明 
在 上 面 的 实例 中 使 用 了 <label> 标 签 ，<label> 标 签 可 以 实现 绑 定 元 素 ， 简单 地 说 , 正常 情况 要 使 
某 个 input 标签 获取 焦点 只 有 单 击 该 标签 才 可 以 实现 ， 而 使 用 <label> 标 签 以 后 ， 单 击 与 该 标签 绑 定 
的 文字 或 图 片 就 可 以 实现 获取 焦点 。 


8.2.2 单 选 框 和 多 选 杠 


单 选 框 和 多 选 框 经 常 被 用 于 问卷 调查 和 购物 车 中 结算 商品 等 。 其 中 单 选 框 实现 在 一 组 选项 中 只 选 
择 其 中 一 个 ， 而 多 选 框 则 与 之 相反 ， 可 以 实现 多 选 甚至 全 选 。 


1. 单 选 框 


在 网 页 中 ， 单 选 按 钮 用 来 让 浏览 者 在 答案 之 间 进 行 单一 选择 ， 在 页 面 中 以 圆 框 表示 ， 其 语法 格式 
如 下 。 
01 ”<input type="radio" value=" 单 选 按钮 的 取 值 " name=" 单 选 按 钮 名 称 " checked="checked"/> 


回 value: 用 来 设置 用 户 选 中 该 项 目 后 ， 传 送 到 处 理 程序 中 的 值 。 
回 name: 单 选 按钮 的 名 称 ， 需 要 注意 的 是 ， 一 组 单 选 按钮 中 ， 往 往 其 名 称 相 同 ， 这 样 在 传递 时 
才能 更 好 地 对 某 一 个 选择 内 容 的 取 值 进行 判断 。 
回 “checked: 表示 这 一 单 选 按钮 默认 被 选中 ， 在 一 组 单 选 按钮 中 只 能 有 一 项 单 选 按钮 被 设置 为 
checked 。 
2. 复 选 杠 
浏览 者 填写 表单 时 ， 有 一 些 内 容 可 以 通过 让 浏览 者 进行 多 项 选择 的 形式 来 实现 。 例 如 ， 收 集 个 人 
信息 时 ， 要 求 在 个 人 爱好 的 选项 中 进行 选择 等 。 复 选 框 能 够 进行 项 目的 多 项 选择 ， 以 一 个 方 框 表示 。 
其 语法 格式 如 下 。 
01 ”<input type="checkbox" value=" 复 选 框 的 值 " name=" 名 称 " checked="checked" /> 


在 上 面 的 语法 中 ， 各 属性 的 含义 和 属性 值 与 单 选 框 相同 ， 此 处 不 做 过 多 资 述 。 但 与 单 选 框 不 同 的 
是 ， 一 组 多 选 按钮 中 ， 可 以 设置 多 个 复 选 框 被 默认 选中 。 

例 8.02 ”本 实例 是 实现 在 购物 车 界面 中 选择 商品 的 功能 ， 实 现 步骤 如 下 。( 实例 位 置 : 资源 包 \ 源 
码 \08\8.02 ) 

(1) 新 建 HTML 文件 ， 在 HTML 文件 中 ， 通 过 单 选 按钮 实现 商品 的 “全 选 ” 和 “全 不 选 ”， 并且 
通过 复 选 框 实现 逐个 选择 商品 的 按钮 ， 其 HTML 代码 如 下 。 


01 <div class="mr-cont"> 


02 <form> 

03 <!- 使 用 label 标签 绑 定单 选 框 ， 单 击 汉字 “全 选 ”或 “全 不 选 ” 时 ， 也 能 选中 对 应 按钮 -> 
04 <label><input type="radio" name="all"> 全 选 </label> 

05 <label><input type="radio" name="all"> 全 不 选 </label> 


06 <!-- 复 选 框 --> 
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07 <input type="checkbox" class="checkbox1"> 
08 <input type="checkbox" class="checkbox1"> 
09 <input type="checkbox" class="checkbox1"> 
10 </form> 

11 </div> 


(2) 新 建 CSS3 文件 ， 在 CSS3 文件 中 设置 整体 页 面 的 大 小 位 置 以 及 复 选 框 的 位 置 ， 具 体 代码 如 下 。 


01 /页 面 整体 布局 */ 

02 .mr-cont{ 

03 width: 510px; 

04 height: 405px; 

05 margin: 20px auto; 

06 border 1px solid #00; 

07 background: url(../img/4-4.jpg); 


09 ”/* 通 过 内 边 距 调 整 表单 位 置 */ 
10 form{ 
11 padding-top: 10px; 


. 
13 ”A* 属 性 选择 器 设置 复 选 框 样式 */ 
14 [type="checkbox"]{ 
15 display: block; 
16 height: 125px; 
ry 


完成 代码 编辑 后 ， 在 浏览 器 中 运行 代码 ， 运 行 效果 如 图 8.4 所 示 。 


Huawsi/ 华 为 畅 享 5【 粉 基 新 色 上 
市 ] 全 网 通 八 核 4G 智 能 手机 


去 加 日 
Huawei/ 华 为 P9 3GB+32GB 【华为 
目 官方 ] 徕卡 双 摄 4G 智 能 拍 8 手机 
写 园 回 
Huawei/ 华 为 P9 plus 【华为 官方 


5.5 贡 二 体 卡 7q 扣 4G 久 能 的 了 8 手机 
™\ 
忌 回 四 


8.4 添加 复 选 框 的 效果 


多 学 两 招 
设置 单 选 按 钮 和 复 选 框 的 某 个 按钮 默认 被 选中 时 ，checked="checked" 可 以 简写 为 checked。 
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8.2.3 按钮 


按钮 是 表单 中 不 可 缺少 的 一 部 分 ， 主 要 分 为 “普通 ”按钮 “提交 ”按钮 和 “ 重 置 ” 按 钮 ，3 个 按 
钮 的 用 途 各 不 相同 ， 希 望 读者 学 习 了 本 节 后 ， 能 够 灵活 使 用 这 3 种 按钮 。 


1.“ 普 通 ” 按 钮 

在 网 页 中 “普通 ”按钮 也 很 常见 ， 在 提交 页 面 、 恢 复 选项 时 常常 用 到 。“ 普 通 ” 按 钮 一 般 情况 下 要 
配合 JavaScript 来 进行 表单 处 理 ， 其 语法 格式 如 下 。 

<input type="button" value=" 按 钮 的 取 值 " name=" 按 钮 名 " onclick=" 处 理 程序 "/> 

回 “value: 按键 上 显示 的 文字 。 

回 name: 按钮 名 称 。 

回 onclick: 当 鼠 标 单 击 按钮 时 所 进行 的 处 理 。 

2.“ 提 交 ” 按 钮 

“提交 ”按钮 是 一 种 特殊 的 按钮 ， 不 需要 设置 onclick 属性 ， 在 单 击 该 类 按钮 时 可 以 实现 表单 内 容 
的 提交 ， 其 语法 格式 如 下 。 

<input type="submit" name=" 按 钮 名 " value=" 按 钮 的 取 值 " /> 
国 办 多 学 两 招 


当 “ 提 交 ” 按 钮 没有 设置 按钮 取 值 时 ， 其 默认 取 值 为 “提交 ”。 也 就 是 “提交 ”按钮 上 默认 显 
示 的 文字 为 “提交 ” 


3.“ 重 置 ”按钮 
单 击 “ 重 置 ” 按 钮 后 ， 可 以 清除 表单 的 内 容 ， 恢 复 默 认 的 表单 内 容 设 定 ， 其 语法 格式 如 下 。 
<input type="reset" name=" 按 钮 名 " value=" 按 钮 的 取 值 " /> 
V4 
6 和 培 明 


使 用 “提交 ”按钮 和 “ 重 置 ”按钮 时 ， 其 name 和 value 的 属性 值 的 含义 与 “普通 ”按钮 相同 ， 
此 处 ， 不 做 过 多 描述 。 


国 办 多 学 两 招 
当 “ 重 置 ”按钮 没有 设置 按钮 取 值 时 ， 该 按钮 上 默认 显示 的 文字 为 “ 重 置 ”。 


例 8.03 使 用 form 表单 实现 企业 进 销 管理 系统 的 登录 界面 ， 其 实现 步骤 如 下 。( 实例 位 置 : 资源 
包 \ 源 码 \08\8.03 ) 


(1) 新 建 HIML 文件 , 在 HIML 页 面 中 插入 <input> 标 签 ， 并 且 通 过 设置 每 个 <input> 标 签 的 type 
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属性 ， 实 现 单 选 、 多 选 以 及 按钮 ， 关 键 代 码 如 下 。 
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01 <divclass="mr-cont"> 
02 ”<h2> 收 货 信息 填写 </h2> 


03 <form action="login.html"> 


04 <div> 姓 名 : 

05 <input type="text"><span class="red">**** 必 填 项 </span> 
06 </div> 

07 <div> 电 话 : 

08 <input type="text"><span class="red">*** 必 填 项 </span> 
09 </div> 

10 <div> 是 否 允许 代 收 : 

11 <label> 是 <input type="radio" name="receive" checked></label> 
12 <label> 否 <input type="radio" name="receive"></label> 
13 </div> 

14 <div class="addr"> 地 址 : 

15 <input type="text" placeholder="-- 省 " size="5"> 

16 <input type="text" placeholder="-- 市 " size="5"> 

17 </div> 

18 <div> 

19 <p> 具 体 地 址 : <span class="red">**** 必 填 项 </span></p> 
20 <textarea></textarea> 

21 </div> 

22 <div id="btn"> 

23 < 上 -提交 按钮 ， 单 击 提交 表单 信息 --> 

24 <input type="submit" value=" 提 交 "> 

25 < 上 -普通 按钮 ， 通 过 onclick 调用 处 理 程序 --> 

26 <input type="button" value=" 保 存 " onClick="alert(' 保 存 信息 成 功 )"> 
4 <!- 重 置 按 钮 ， 单 击 后 表单 恢复 默认 状态 --> 

28 <input type="reset" value=" 重 填 "> 

29 </div> 


UH 


(2) 新 建 CSS3 文件 ， 在 CSS3 文件 


01 /页 面 整体 布局 */ 

02 .mr-cont{ 

03 height: 474px; 

04 width: 685px; 

05 margin: 20px auto; 

06 border: 1px solid #00; 
07 background: url(../img/bg.png); 
08. 

09 .mr-cont div{ 

10 width: 400px; 

位 text-align: center; 

这 margin: 30px 0 0 140px; 
19. 3 

14 #btn{ 

Is margin-top: 10px; 

16 } 


， 设 置 页 面 的 整体 布局 以 及 各 标签 的 样式 ， 


关键 代码 如 下 。 
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17 ”A 设置 “提交 ”“ 保 存 ”“ 重 填 ” 按 钮 的 大 小 */ 


18  #btn input{ 
19 width: 80px: 
20 height: 30px; 


图 8.5 收 货 信息 填写 界面 


8.2.4 文件 域 和 图 像 域 


图 像 域 和 文件 域 在 网 页 中 也 比较 常见 。 其 中 图 像 域 是 为 了 解决 表单 中 按钮 比较 单调 ， 与 页 面 内 容 
不 协调 的 问题 ， 而 文件 域 则 常用 于 需要 上 传 文件 的 表单 。 


1. 图 像 域 


图 像 域 是 指 可 以 用 在 “提交 ”按钮 位 置 上 的 图 片 ， 这 幅 图 片 具 有 按钮 的 功能 。 使 用 默认 的 按钮 形 
式 往往 会 让 人 觉得 单调 。 如 果 网 页 使 用 了 较为 丰富 的 色彩 ， 或 稍微 复杂 的 设计 ， 再 使 用 表单 默认 的 按 
钮 形式 甚至 会 破坏 整体 的 美感 。 这 时 ， 可 以 使 用 图 像 域 ， 创 建 和 网 页 整体 效果 相 统一 的 “图 像 提交 ” 
按钮 ， 其 语法 如 下 。 


01 <input type="image" src=" "name=""/> 


回 src: 设置 图 片 地 址 ， 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 。 
回 name: 设置 所 要 代表 的 按键 ， 如 submit、button 等 ， 默 认 值 为 button。 


2. 文件 域 


文件 域 在 上 传 文件 时 常常 用 到 ， 它 用 于 查找 硬盘 中 的 文件 路 径 ， 然 后 通过 表单 将 选中 的 文件 上 传 。 
在 设置 电子 邮件 、 上 传 头像 、 发 送 文件 时 常常 会 看 到 这 一 控件 ， 其 语法 格式 如 下 。 


01 <input type="file" accept="" name="" > 
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回 accept: 所 接受 的 文件 类 别 ， 有 26 种 选择 ， 可 以 省 略 ， 但 不 可 以 自 定 义 文 件 类 型 。 

回 name: 文件 传输 的 名 称 ， 用 于 和 页 面 中 其 他 控件 加 以 区 别 。 

例 8.04 本 实例 是 要 实现 一 个 在 注册 页 面 中 上 传 头像 的 功能 ， 有 具体 实现 步骤 如 下 。( 实例 位 置 : 资 
源 包 \ 源 码 \08\8.04 ) 

(1) 新 建 一 个 HTML 页 面 ， 在 页 面 中 插入 <input> 标 签 ， 并 且 分 别 设置 其 type 的 属性 值 为 file 和 
image， 代 码 如 下 。 


01 <divclass="mr-cont"> 
02 ”<h2> 用 户 信息 注册 </h2> 


03 <form> 

04 <!- 文 件 域 -> 

05 <input type="file" class="fill"> 

06 < 上 -图 像 域 -> 

07 <input type="image" src="img/btn.jpg" class="btn"> 
08 </form> 

09 </div> 


(2) 新 建 一 个 CSS3 页 面 ， 并 且 通 过 CSS3 设置 页 面 的 背景 图 片 以 及 文件 域 和 图 像 域 的 位 置 ， 代 
码 如 下 。 


01 .mr-cont{ 

02 width: 800px; 

03 height: 600px; 

04 margin: 20px auto; 

05 text-align: center; 

06 border 1px solid #f00; 

07 background: url(../img/bg.png); 


} 
09 ”A* 通 过 内 边 距 调整 标题 位 置 */ 
10 h2{ 
9 padding: 40px 00 0; 


13 A/* 表 单 整 体 样式 */ 

14 form{ 

15 width: 554px ; 

16 height: 462px; 

17 margin: 0 0 0 150px; 

18 background: url(../img/4-9.png); 


} 
20 ”A/* 文 件 域 样式 */ 
21 [type="file"}{ 
4 display: block:; 
这 3 padding: 100px 0 0 175px; 


» 
25 /图 像 域 样式 */ 
26 [type="image"]{ 
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2F margin: 304px 0 0 100px; 
2800y 


运行 效果 如 图 8.6 所 示 。 


用 户 信息 注册 

A 十 人 资料 

Ee 基本 资料 头 合照 片 
恒生 全 造 报 任何 六 件 Ea 
账号 管理 
安全 设置 hei 
个 人 资料 
隐私 设置 
* 个 人 成 长 信息 


支付 宝 绑 定 设置 
补 情 绑 定 设置 

个 人 交易 信息 
收 人 地 址 
应 用 授权 
分 享 志 证 


图 8.6 实现 注册 页 面 的 上 传 头像 和 图 片 按钮 


8.3 文本 域 和 列表 


。 视频 讲解 ”| 


本 节 主 要 讲解 文本 域 和 列表 。 文 本 域 和 文本 输入 框 的 区 别 在 于 ， 文本 域 可 以 显示 多 行文 字 ; 而 列 
表 与 单 选 按 钮 或 复 选 框 相 比 ， 既 可 以 有 多 个 选择 项 ， 又 不 浪费 空间 ， 还 可 以 减少 代码 量 。 


8.3.1 文本 域 


在 HIML 中 还 有 一 种 特殊 定义 的 文本 样式 ， 称 为 文本 域 。 它 与 文本 框 的 区 别 在 于 可 以 添加 多 行文 
从 而 可 以 输入 更 多 的 文本 。 这 类 控件 在 一 些 留言 板 中 最 为 常见 ， 其 语法 格式 如 下 。 


01 ”<textarea name=" 文 本 域名 称 " value=" 文 本 域 默认 值 " rows=" 行 数 " cols=" 列 数 "></textarea> 


name: 文本 域 的 名 称 。 

value: 文本 域 的 默认 值 。 

rows: 文本 域 的 行 数 。 

cols: 文本 域 的 列 数 。 

例 8.05 本 实例 是 实现 商品 评价 页 面 中 的 评价 输入 框 ， 具 体 步 又 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \ 
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08\8.05 ) 
(1) 新 建 HTML 文件 ， 在 HTML 文件 中 ， 插 入 文本 域 标签 实现 评价 输入 框 ， 其 代码 如 下 。 


01 <div class="mr-content"> 
02 <form> 


03 <!-- 文 本 域 -> 

04 <textarea cols="44" rows="9" class="mr-message"></textarea> 
05 </form> 

06 </div> 


(2) 新 建 一 个 CSS3 文件 ， 通 过 CSS3 代码 设置 网 页 的 背景 图 片 ， 并 且 改 变 文本 域 的 位 置 ， 其 代 
码 如 下 。 


01 .mr-content{ 


02 width: 695px; 

03 height: 300px; 

04 margin: 0 auto; 

05 background: url(../images/bg.png) no-repeat; 
06 border: 1px solid red; 

07 


} 

08 A* 文 本 域 样式 */ 

09 .mr-content textarea{ 

10 margin: 103px 0 0 346px; 
} 


在 谷歌 浏览 器 中 运行 代码 ， 运 行 效果 如 图 8.7 所 示 。 


店 和 有 态 评分 全 部 匿名 评论 
宝 风 宝 由 与 描述 相符 (打分 匿名 ) 
Huawei/ 华 为 由 京 6 人 粉 蕊 新 色 上 
= WE 
bd 宝贝 很 不 错 ， 物 流 你 也 很 给 力 。 
二 加 加 


< 收 起 评论 


8.7 添加 文本 域 的 效果 
8.3.2 列表 /菜单 


菜单 列表 类 的 控件 主要 用 来 进行 选择 给 定 答案 中 的 一 种 ， 这 类 选择 往往 答案 比较 多 ， 使 用 单 选 按 
钮 比较 浪费 空间 。 可 以 说 ， 菜 单列 表 类 的 控件 主要 是 为 了 节省 页 面 空 间 而 设计 的 。 菜 单 和 列表 都 是 通 
过 <select> 和 <option> 标 签 来 实现 的 。 菜 单 和 列表 标签 属性 如 表 8.2 所 示 。 
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表 8.2 菜单 和 列表 标签 属性 


菜单 和 列表 标签 属性 描述 
name 列表 /菜单 标签 的 名 称 ， 用 于 和 页 面 中 其 他 控件 加 以 区 别 
size 定义 列表 /菜单 文本 框 在 页 面 中 显示 的 长 度 
multiple 表示 列表 /菜单 内 容 可 多 选 
value | 用 于 定义 列表 /菜单 的 选项 值 时 
selected 默认 被 选中 
菜单 是 一 种 最 节省 空间 的 方式 ， 正 常 状态 下 只 能 看 到 一 个 选项 ， 单 击 按钮 打开 菜单 后 才能 看 到 全 
部 的 选项 。 
列表 可 以 显示 一 定数 量 的 选项 ， 如 果 超 出 了 这 个 数量 ， 会 自动 出 现 滚动 条 ， 浏 览 者 可 以 通过 拖 电 
滚动 条 显示 各 选项 。 


其 语法 格式 如 下 。 


01 <selectname="" size="" multiple=" multiple > 


02 <option value="" selected="selected"> 选 项 显示 内 容 </option> 
03 <option value=" 选 项 值 "> 选项 显示 内 容 </option> 
05 </select> 


例 8.06 ”实现 个 人 资料 填写 页 面 ， 具 体 步 又 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \08\8.06 ) 
(1) 新 建 HTML 文件 ， 在 HTML 页 面 通过 下 拉 列 表 实 现 星座 、 血 型 和 生肖 的 选择 。 部 分 HTML 
代码 如 下 。 


01 <divclass="mr-cont"> 


02 <form> 

03 <div class="mess"> 

04 <!-- 下 拉 列 表 实 现 星座 选择 --> 

05 <div> 星 座 : 

06 <select> 

07 <option> 水 平 座 </option> 
08 <option> 人 金牛 座 </option> 
09 <option> 其 他 星座 </option> 
10 </select> 

11 </div> 

12 <!-- 下 拉 列 表 实 现 血 型 选择 --> 

149 <div> 血型 : 

14 <select> 

15 <option>A 型 </option> 
16 <option>B 型 </option> 
17 <option>AB 型 </option> 
18 <option>O 型 </option> 
19 </select> 

20 </div> 

21 <!-- 下 拉 列 表 实 现 生 肖 选 择 --> 

22 <div> 生 肖 : 

23 <select> 
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24 <option> 鼠 </option> 
25 <option> 牛 </option> 
26 <option> 其 他 </option> 
27 </select> 

28 </div> 

29 </div> 

30 </form> 

31 </div> 


(2) 新 建 CSS 文件 ， 在 CSS 文件 中 改变 HTML 中 各 标签 的 样式 和 布局 ， 关 键 代码 如 下 。 


01 .mr-cont{ 

02 height: 360px: 

03 width: 915px; 

04 margin: 20px auto; 

05 border: 1px solid #00; 
06 background: rgba(181, 181, 255,0.65); 
O70 

08 .type{ 

09 width: 285px; 

10 height: 180px; 

11 float: left; 

1 

13 .type div{ 

14 width: 350px; 

15 height: 30px; 

16 margin: 30px 0 0 60px; 
A 


在 谷歌 浏览 器 中 运行 代码 ， 运 行 效果 如 图 8.8 所 示 。 


栏 名， “星座 ”下 拉 列 表 上 耻 I “男女 年 败 几 “生肖 ”下 拉 列 表 
8 血型 ， ES | 


职业 : 手机 : 


邮箱 : 
个 人 说 明 : 


展开 的 “血型 ”下 拉 列 表 


8.8 个 人 档案 资料 填写 
8.4 小 结 


本 章 详细 讲解 了 HTML 表单 ， 主 要 包括 文本 框 、 密 码 域 、 单 选 按钮 、 复 选 框 、 普 通 按 钮 、 提 交 按 
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钮 、 重 置 按钮 、 图 像 域 、 隐 藏 域 、 文 件 域 、 文 本 域 和 下 拉 菜单 等 。 学 完 本 章 以 后 ， 读 者 可 以 独立 完成 
网 站 中 登录 页 面 的 设计 与 实现 ， 同 时 可 以 结合 CSS 美化 页 面 。 


8.5 实 战 


8.5.1 实战 一 : 制作 QQ 登录 页 面 
制作 QQ 登录 界面 。( 资源 包 \ 源 码 \08\ 实 战 \01 ) 
8.5.2 实战 二 : 制作 象棋 游戏 注册 页 面 
制作 象棋 游戏 的 注册 界面 。( 资源 包 \ 源 码 \08\ 实 战 \02 ) 
8.5.3 实战 三 : 制作 个 人 档案 


使 用 列表 /菜单 实现 个 人 档案 。( 资源 包 \ 源 码 \08\ 实 战 \03 ) 
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多 媒体 
( 锅 ' 视频 讲解 : 1 小 时 S 分 钟 ) 


在 HTML5 出 现 之 前 ， 要 在 网 络 上 展示 视频 、 音 频 、 动 画 ， 除 了 使 用 第 三 方 自 
主 开发 的 播放 器 之 外 ， 使 用 得 最 多 的 工具 应 该 是 Flash 了 ， 但 是 它们 都 需要 在 浏览 
器 中 安装 各 种 插件 才能 使 用 , 而且 有 时 速度 很 慢 。HTML5 的 出 现 改 变 了 这 个 问题 。 
在 HTML5 中 ,提供 了 音频 、 视 频 的 标准 接口 ,， 通过 HTML5 中 的 相关 技术 ,视频 、 
动画 、 音 频 等 多 媒体 播放 再 也 不 需要 安装 插件 了 ， 只 要 一 个 支持 HTML5 的 浏览 器 
即 可 。 

学 习 摘 要 : 

MH HTML5 多 媒体 的 简 述 

MW 多 媒体 元 素 基 本 属性 

H 多 媒体 元 素 常 用 方法 

MW 多 媒体 元 素 重要 事件 
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9.1 HTMLS5 多 媒体 的 简 述 


Web 上 的 多 媒体 指 的 是 音效 、 音 乐 、 视 频 和 动画 。 多 媒体 来 自 多 种 不 同 的 格式 。 它 可 以 是 您 听 到 
或 看 到 的 任何 内 容 、 文 字 、 图 片 、 音 乐 、 音 效 、 录 音 、 电 影 、 动 画 等 。 在 互联 网 上 ， 您 会 经 常 发 现 嵌 
入 网 页 中 的 多 媒体 元 素 ， 现 代 浏 览 器 已 支持 多 种 多 媒体 格式 。 在 本 章 中 ， 将 了 解 到 不 同 的 多 媒体 格式 ， 
以 及 如 何在 网 页 中 使 用 它们 。 


9.1.1 HTML4 中 多 媒体 的 应 用 


在 HTML5 之 前 ， 如 果 开 发 者 想 要 在 Web 页 面 中 包含 视频 ， 必 须 使 用 <object> 和 <embed> 元 素 。 而 
且 还 要 为 这 两 个 元 素 添加 许多 属性 和 参数 。 在 HTML4 中 多 媒体 的 应 用 代码 如 下 。 


01 <object width="425" height="344"> 


02 <param name="movie" value="http://www.mingribok.com" /> 
03 <param name="allowFullScreen" value="true" /> 

04 <param name="aiiowscriptaccess" value="always" /> 

05 <embed src="http://www.mingribok.com" 

06 type="application/x-shockwave-flash" 

07 allowscriptaccess="always" 

08 allowFullScreen="ture" width="425" height="344"> 
09 </embed> 

10 </object> 


从 上 面 的 代码 可 以 看 出 ， 在 HTML4 中 使 用 多 媒体 有 如 下 缺点 。 

回 ”代码 元 长 而 笨拙 。 

回 ”需要 使 用 第 三 方 插件 (Flash)。 如 果 用 户 没有 安装 Flash 插件 ， 则 不 能 播放 视频 ， 画 面 上 也 会 
出 现 一 片 空白 。 


9.1.2 HTML5 页 面 中 的 多 媒体 


在 HIML5 中 , 新 增 了 两 个 元 素 一 一 video 与 audio。video 元 素 专门 用 来 播放 网 络 上 的 视频 或 电影 ， 
而 audio 元 素 专 门 用 来 播放 网 络 上 的 音频 数据 。 使 用 这 两 个 元 素 ， 就 不 再 需要 使 用 其 他 任何 插件 了 ， 只 
要 使 用 支持 HIMLS 的 浏览 器 即 可 。 表 9.1 中 介绍 了 目前 浏览 器 对 video 元 素 与 audio 元 素 的 支持 情况 。 


表 9.1 目前 浏览 器 对 video 元 素 与 audio 元 素 的 支持 情况 


浏 览 器 支持 情况 
Chrome 8 位 有 符号 整数 
Firefox 16 位 有 符号 整数 

era 32 位 有 符号 整数 
Safari 64 位 有 符号 整数 
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这 两 个 元 素 的 使 用 方法 都 很 简单 ， 首 先 以 audio 元 素 为 例 ， 只 要 把 播放 音频 的 URL 给 指定 元 素 的 
src 属性 即 可 ，audio 元 素 使 用 方法 如 下 。 
01 <audio src="http://mingri/demo/test.mp3"> 
02 ”您 的 浏览 器 不 支持 audio 元 素 ! 
03 </audio> 
通过 这 种 方法 ， 可 以 把 指定 的 音频 数据 直接 嵌入 网 页 上 ， 其 中 “您 的 浏览 器 不 支持 audio 元 素 !” 
为 在 不 支持 audio 元 素 的 浏览 器 中 所 显示 的 替代 文字 。 
video 元 素 的 使 用 方法 也 很 简单 ， 只 要 设 定好 元 素 的 长 、 宽 等 属性 ， 并 且 把 播放 视频 的 URL 地 址 
指定 给 该 元 素 的 src 属性 即 可 ，video 元 素 的 使 用 方法 如 下 。 
01 <video width="640" height="360" src=" http://mingri/demol/test.mp3"> 
02 ”您 的 浏览 器 不 支持 video 元 素 ! 
03 <Nideo> 
另外 ， 还 可 以 通过 使 用 source 元 素来 为 同一 个 媒体 数据 指定 多 个 播放 格式 与 编码 方式 ， 以 确保 浏 
览 器 可 以 从 中 选择 一 种 自己 支持 的 播放 格式 进行 播放 ， 浏 览 器 的 选择 顺序 为 代码 中 的 书写 顺序 ， 它 会 
从 上 往 下 判断 自己 对 该 播放 格式 是 否 支持 ， 直 到 选择 到 自己 支持 的 播放 格式 为 止 。 其 使 用 方法 如 下 。 
01 <video width="640" height="360"> 
02 ”<!- 在 Ogg theora 格式 、Quicktime 格式 与 MP4 格式 之 间 选 择 自己 支持 的 播放 格式 。 一 > 
03 <source src="demo/sample.ogv" type="video/ogg; codecs='theora, vorbis"/> 
04 <source src="demo/sample.mov" type="video/quicktime"/> 
05 </video> 
source 元 素 具有 以 下 几 个 属性 。 
回 src 属性 是 指 播放 媒体 的 URL 地 址 。 
回 “type 属性 表示 媒体 类 型 ， 其 属性 值 为 播放 文件 的 MIME 类 型 ， 该 属性 中 的 codecs 参数 表示 所 
使 用 的 媒体 的 编码 格式 。 
因为 各 浏览 器 对 各 种 媒体 类 型 及 编码 格式 的 支持 情况 都 各 不 相同 ， 所 以 使 用 source 元 素来 指定 多 
种 媒体 类 型 是 非常 有 必要 的 。 
回 正 9: 支持 了 H.264 和 VP8 视频 编码 格式 ; 支持 MP3 和 WAV 音频 编码 格式 。 
回 Firefox 4 及 以 上 、Opera 10 及 以 上 : 支持 Ogg Theora 和 VP8 视频 编码 格式 ; 支持 Ogg vorbis 
和 WAV 音频 格式 。 
回 ” Chrome 6 及 以 上 : 支持 H264、VP8 和 Ogg Theora 视频 编码 格式 ， 支持 Ogg vorbis 和 MP3 
音频 编码 格式 。 


9.2 多 媒体 元 素 基 本 属性 


Video 元 素 与 audio 元 素 所 具有 的 属性 大 致 相同 ， 所 以 接 下 来 看 一 下 这 两 个 元 素 都 具有 哪些 属性 。 
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1. src 属性 和 autoplay 属性 


src 属性 用 于 指定 媒体 数据 的 URL 地 址 。 
autoplay 属性 用 于 指定 媒体 是 否 在 页 面 加 载 后 自动 播放 ， 使 用 方法 如 下 。 


01 <video src="sample.mov" autoplay="autoplay"></video> 


2. perload 属性 


perload 属性 用 于 指定 视频 或 音频 数据 是 否 预 加 载 。 如 果 使 用 预 加 载 ， 则 浏览 器 会 预先 将 视频 或 音 
频数 据 进 行 缓冲 ， 这 样 可 以 加 快 播放 速度 ， 因 为 播放 时 数据 已 经 预先 缓冲 完毕 。 该 属性 有 3 个 可 选 值 ， 
分 别 是 none、metadata 和 auto， 其 默认 值 为 auto。 

回 none 值 表 示 不 进行 预 加 载 。 

加 ”metadata 值 表 示 只 预 加 载 媒体 的 元 数据 〈 媒 体 字 节 数 、 第 一 帧 、 播 放 列表 、 持 续 时 间 等 )。 

回 auto 值 表示 预 加 载 全 部 视频 或 音频 。 

preload 属性 的 使 用 方法 如 下 。 


01 <video src="sample.mov" preload="auto"></video> 


3. poster 属性 〈video 元 素 独 有 属性 ) 和 loop 属性 

当 视 频 不 可 用 时 ， 可 以 使 用 video 元 素 向 用 户 展示 一 幅 蔡 代 用 的 图 片 ， 最 好 使 用 poster 属性 ， 以 免 
展示 视频 的 区 域 中 出 现 一 片 空白 。poster 属性 的 使 用 方法 如 下 。 

01 <video src="sample.mov" psoter="cannotuse.jpg"></video> 

loop 属性 用 于 指定 是 否 循环 播放 视频 或 音频 ， 其 使 用 方法 如 下 。 

01 <video src="sample.mov" autoplay="autoplay" loop="loop"></video> 

4. controls 属性 、width 属性 和 height 属性 (后 两 个 video 元 素 独 有 属性 ) 

controls 属性 指定 是 否 为 视频 或 音频 添加 浏览 器 自 带 的 播放 用 的 控制 条 。 控 制 条 中 具有 播放 、 和 暂停 
等 按钮 ， 其 使 用 方法 如 下 。 

01 <video src="sample.mov" controls="controls"></video> 


图 9.1 为 Google Chrome5.0 浏览 器 自 带 的 播放 视频 时 用 的 控制 条 的 外 观 。 


j> 000 eo——— 0 —® :4 
图 9.1 Google Chrome5.0 浏览 器 自 带 的 播放 视频 时 用 的 控制 条 


NO 


开发 者 也 可 以 在 脚本 中 自 定义 控制 条 ， 而 不 使 用 浏览 器 默认 的 。 
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width 属性 与 height 属性 用 于 指定 视频 的 宽度 与 高 度 〈 以 像素 为 单位 )， 使 用 方法 如 下 。 


01 


<video src="sample.mov" width="500" height="500"></video> 


5. error 属性 

在 读 取 、 使 用 媒体 数据 的 过 程 中 ， 在 正常 情况 下 ，error 属性 为 null， 但 是 任何 时 候 只 要 出 现 错误 ， 
该 属性 将 返回 一 个 MediaError 对 象 , 该 对 象 的 code 属性 返回 对 应 的 错误 状态 码 ， 其 可 能 的 值 包括 以 下 
方面 。 


回 
加 


回 
回 


MEDIA_ERR_ABORTED (数值 1): 媒体 数据 的 下 载 过 程 由 于 用 户 的 操作 原因 而 被 终止 。 
MEDIA_ERR_NETWORK (数值 2): 确认 媒体 资源 可 用 ， 但 是 在 下 载 时 出 现 网 络 错误 ， 媒 体 
数据 的 下 载 过 程 被 终止 。 

MEDIA_ERR_DECODE (数值 3): 确认 媒体 资源 可 用 ， 但 是 解码 时 发 生 错 误 。 
MEDIA_ERR_SRC NOT_ SUPPORTED (数值 4): 媒体 资源 不 可 用 媒体 格式 不 被 支持 。 


error 属性 为 只 读 属性 。 读 取 错 误 状 态 的 代码 如 下 。 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
和 
12 
13 
14 
15 
16 
17 
18 
19 
20 
al 
22 
23 
24 
25 


<video id="videoElement" src="mingri.mov"> 
<script> 
var video=document.getElementByld("video Element"); 
video.addEventListener("error",function(X{ 
{ 

Var error=video.error; 

switch (error.code) 

{ 

case 1: 
alert(" 视 频 的 下 载 过 程 被 终止 。"); 


break; 


case 2: 
alert(" 网 络 发 生 故 障 ， 视 频 的 下 载 过 程 被 终止 。"); 
break; 
case 3: 
alert(" 解 码 失败 。"); 
break; 
case 4: 
alert(" 不 支持 播放 的 视频 格式 。"); 
break; 
default: 
alert(" 发 生 未 知 错误 。"); 


} 
yfalse); 
</script> 


6. networkState 属性 


networkState 属性 在 媒体 数据 加 载 过 程 中 读 取 当 前 网 络 的 状态 ， 其 值 包括 以 下 方面 。 
回 NETWORK EMPTY (数值 0): 元 素 处 于 初始 状态 。 
回 NETWORK IDLE (数值 1): 浏览 器 已 选择 好 用 什么 编码 格式 来 播放 媒体 ， 但 尚未 建立 网 络 
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NETWORK LOADING (数值 2): 媒体 数据 加 载 中 。 
加 NETWORK NO_SOURCE (数值 3): 没有 支持 的 编码 格式 ， 不 执行 加 载 。 
networkState 属性 为 只 读 属 性 ， 读 取 网 络 状态 的 实例 代码 如 下 。 


01 <script> 

02 var video = document.getElementByld("video"); 

03 video.addEventListener("progress", function(e) 

04 证 

05 var networkStateDisplay=document.getElementByld("networkState"); 
06 if(video.networkState==2) 

07 { 

08 networkStateDisplay.innerHTML=" 加 载 中 .…["+e.loaded+"/"+e.total+"byte]"; 
09 } 

10 else if(video.networkState==3) 

11 { 

bp networkStateDisplay.innerHTML=" 加 载 失败 "; 

13 } 

14 yfalse); 

15 </script> 


7. currentSrc 属性 和 buffered 属性 


可 以 用 currentSre 属性 来 读 取 播 放 中 的 媒体 数据 的 URL 地 址 ， 该 属性 为 只 读 属性 。 

buffered 属性 返回 一 个 实现 TimeRanges 接口 的 对 象 ， 以 确认 浏览 器 是 否 已 缓存 媒体 数据 。 
TimeRanges 对 象 表示 一 段 时 间 范 围 ,在 大 多 数 情况 下 ， 该 对 象 表示 的 时 间 范 围 是 一 个 单一 的 以 “0” 开 

台 的 范围 ， 但 是 如 果 浏 览 器 发 出 Range Rquest 请 求 ， 这 时 TimeRanges 对 象 表 示 的 时 间 范 围 是 多 少 个 时 
问 范围 。 

TimeRanges 对 象 具有 一 个 length 属性 ， 表 示 有 多 少 个 时 间 范 围 ， 多 数 情况 下 存在 时 间 范 围 时 ， 该 
值 为 1; 不 存在 时 间 范 围 时 , 该 值 为 0。 该 对 象 有 两 个 方法 : start(index) 和 end(index), 多 数 情况 下 将 index 
设置 为 0 即 可 。 当 用 element.buffered 语句 来 实现 TimeRanges 接口 时 ，start(0) 表 示 当 前 缓存 区 内 从 媒体 
数据 的 什么 时 间 开 始 进行 缓存 ，end(0) 表 示 当 前 缓存 区 内 的 结束 时 间 。buffered 属性 为 只 读 属 性 。 


8. readyState 属性 


readyState 属性 为 只 读 属性 。 该 属性 返回 媒体 当前 播放 位 置 的 就 绪 状 态 ， 其 值 包括 以 下 方面 。 

回 HAVE_NOTHING (数值 0): 没有 获取 到 媒体 的 任何 信息 ， 当 前 播放 位 置 没 有 可 播放 数据 。 

回 HAVE_ METADATIA (数值 1): 已 经 获取 到 了 足够 的 媒体 数据 ,但 是 当前 播放 位 置 没有 有 效 的 
媒体 数据 〈 也 就 是 说 ， 获 取 到 的 媒体 数据 无 效 ， 不 能 播放 )。 

回 HAVE_CURRENT _ DATA (数值 2): 当前 播放 位 置 已 经 有 数据 可 以 播放 ， 但 没有 获取 到 可 以 
让 播放 器 前 进 的 数据 。 当 媒体 为 视频 时 ， 意 思 是 当前 帧 的 数据 已 获取 ， 但 还 没有 获取 到 下 一 
帧 的 数据 ， 或 者 当前 帧 已 经 是 播放 的 最 后 一 帧 。 

回 HAVE FUTURE DATA (数值 3): 当前 播放 位 置 已 经 有 数据 可 以 播放 ， 同 时 也 获取 到 了 可 以 
让 播放 器 前 进 的 数据 。 当 媒体 为 视频 时 ， 意 思 是 当前 帧 的 数据 已 获取 ， 而 且 也 获取 到 了 下 一 
帧 的 数据 ， 当 前 帧 是 播放 的 最 后 一 帧 时 ，readyState 属性 不 可 能 为 HAVE_ FUTURE _DATA。 
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HAVE_ ENOUGH DATA (数值 4): 当前 播放 位 置 已 经 有 数据 可 以 播放 ， 同 时 也 获取 到 了 可 以 
让 播放 器 前 进 的 数据 ， 而 且 浏 览 器 确认 媒体 数据 以 某 一 种 速度 进行 加 载 ， 可 以 保证 有 足够 的 
后 续 数据 进行 播放 。 
9.seeking 属性 和 seekable 属性 
seeking 属性 返回 一 个 布尔 值 ， 表 示 浏 览 器 是 否 正 在 请 求 某 一 特定 播放 位 置 的 数据 ，true 表示 浏览 
器 正在 请 求 数 据 ，false 表示 浏览 器 已 停止 请 求 。 
seekable 属性 返回 一 个 TimeRanges 对 象 , 该 对 象 表示 请 求 到 的 数据 的 时 间 范 围 。 当 媒体 为 视频 时 ， 
开始 时 间 为 请 求 到 视频 数据 第 一 帧 的 时 间 ， 结 束 时 间 为 请 求 到 视频 数据 最 后 一 帧 的 时 间 。 
seeking 和 seekable 这 两 个 属性 均 为 只 读 属 性 。 


10. currentTime 属性 、startTime 属性 和 duration 属性 


currentTime 属性 用 于 读 取 媒体 的 当前 播放 位 置 , 也 可 以 通过 修改 currentTime 属性 来 修改 当前 播放 
位 置 。 如 果 修改 的 位 置 上 没有 可 用 的 媒体 数据 ， 将 抛 出 INVALID_STATE _ERR 异常 ， 如 果 修 改 的 位 置 
超出 了 浏览 器 在 一 次 请 求 中 可 以 请 求 的 数据 范围 ， 将 抛 出 NDEX_SIZE_ERR 异常 。 

startTime 属性 用 来 读 取 媒 体 播放 的 开始 时 间 ， 通 常 为 0。 

duration 属性 来 读 取 媒 体 文件 总 的 播放 时 间 。 


11. played 属性 、paused 属性 和 ended 属性 

played 属性 返回 一 个 TimeRanges 对 象 ， 从 该 对 象 中 可 以 读 取 媒 体 文件 的 已 播放 部 分 的 时 间 段 。 开 
台 时 间 为 已 播放 部 分 的 开始 时 间 ， 结 束 时 间 为 已 播放 部 分 的 结束 时 间 。 

paused 属性 返回 一 个 布尔 值 ， 表 示 是 否 暂停 播放 ，true 表示 媒体 暂停 播放 ，false 表示 媒体 正在 播放 。 

ended 属性 返回 一 个 布尔 值 ， 表 示 是 否 播放 完毕 ，true 表示 媒体 播放 完毕 ，false 表示 还 没有 播放 完毕 。 

上 面 这 三 者 均 为 只 读 属性 。 

12. defaultPlaybackRate 属性 和 playbackRate 属性 


defaultPlaybackRate 属性 用 来 读 取 或 修改 媒体 默认 的 播放 速率 。 
playbackRate 属性 用 于 读 取 或 修改 媒体 当前 的 播放 速率 。 


13. volume 属性 和 muted 属性 


volume 属性 用 于 读 取 或 修改 媒体 的 播放 音量 ， 范 围 为 0 一 1，0 为 静音 ，1 为 最 大 音量 。 
muted 属性 用 于 读 取 或 修改 媒体 的 静音 状态 ， 该 值 为 布尔 值 ，true 表示 处 于 静音 状态 ，false 表示 处 
于 非 静 音 状态 。 


9.3 多 媒体 元 素 常 用 方法 


多 媒体 播放 时 的 方法 
多 媒体 元 素 常用 的 方法 如 下 。 
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使 用 play0 方 法 播放 视频 ， 并 将 paused() 方 法 的 值 强行 设 为 false。 
使 用 pause0 方 法 暂停 视频 ， 并 将 paused0 方 法 的 值 强 行 设 为 ture。 


使 用 load() 方 法 重新 载 入 视频 ， 并 将 playbackRate 属性 的 值 强行 设 为 defaultPlaybackRate 


的 值 ， 且 强行 将 error 属性 的 值 设 为 null。 


属性 


为 了 展示 视频 播放 时 所 应 用 的 方法 以 及 多 媒体 的 基本 属性 ， 在 控制 视频 的 播放 时 ， 并 没 


有 应 用 浏览 器 自 带 的 控制 条 来 控制 视频 的 播放 ， 而 是 通过 添加 “播放 ”暂停 “停止 ”按钮 来 控制 视 
频 的 播放 ， 和 暂停 和 停止 ， 并 且 制 作 美观 的 进度 条 来 显示 播放 视频 的 进度 。( 实例 位 置 : 资源 包 \ 源 码 \ 


09\9.01 ) 


本 例 实现 的 步 又 如 下 。 


(1) 在 HIMLS 文件 


01 
02 
03 


<body> 
< 上 -添加 视频 ”start--> 
<div class="videoContainer"> 
<!--timeupdate 事件 : 当前 播放 位 置 currentTime 属性 ) 改变 --> 
<video id="videoPlayer” ontimeupdate="progressUpdate()" > 
<source src="butterfly.mp4" type="video/mp4"> 
<source src="butterfly.webm" type="video/webm"> 
</video> 
</div> 
<!- 添 加 视频 end--> 
<!- 进 度 条 和 时 间 显 示 区 域 start--> 
<div class="barContainer > 
<div id="durationBar"> 
<div id="positionBar"><span id="displayStatus"> 进 度 条 .</span></div> 
</div> 
</div> 
<!-- 进 度 条 和 时 间 显示 区 域 ”end--> 
<!-6 个 功能 按钮 start-> 
<div class="btn"> 
<button onclick="play()"> 播 放 </button> 
<button onclick="pause()"> 暂 停 </button> 
<button onclick="stop()"> 停 止 </button> 
<button onclick="speedUp()"> 加 速 播放 </button> 
<button onclick="slowDown()"> 减 速 播放 </button> 
<button onclick="normalSpeed()"> 正常 速度 </button> 
</div> 
<!-6 个 功能 按钮 ”end--> 
</body> 


hp 添加 视频 ， 添 加 播放 、 暂 停 等 功能 按钮 的 HTML 代码 。 具 体 代 码 如 下 。 


(2) 为 播放 、 和 暂停 、 停 止 功能 按钮 绑 定 3 个 onclick 事件 ， 通 过 多 媒体 播放 时 的 方法 即 可 实现 。 
然后 为 加 速 播放 、 减 速 播放 、 正 常 速度 功能 按钮 绑 定 3 个 onclick 事件 ， 在 函数 内 部 改变 playbackRate 
属性 值 ， 即 可 实现 不 同 速度 的 播放 。 最 后 ， 实 现 了 进度 条 内 部 动态 显示 播放 时 间 。 显 示 播 放 时 间 有 具体 
的 实现 方法 是 : 首先， 通过 currentTime 和 duration 属性 ， 获 取 到 当前 播放 位 置 和 视频 播放 总 时 间 ; 然 
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写 入 <span> 标 签 内 部 即 可 。 其 具体 实现 的 代码 如 下 。 
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<script> 
var video:; 
var display; 
window.onload = function() { 
Video = document.getElementByld("videoPlayer"); 
display = document.getElementByld("displayStatus"); 
} 
function play() { 
Video.play(); 
} 
function pause() { 
Vvideo.pause(); 


/currentTime 人 为 地 改变 当前 播放 位 置 ， 触 发 timeUpdate 事件 


function stop() { 
video.pause!(); 
video.currentTime = 0; 

} 

function speedUp() { 
video.play(); 
video.playbackRate = 2; 

} 

function slowDown() { 
video.play(); 
video.playbackRate = 0.5; 

} 

function normalSpeed() { 
Video.play(); 
video.playbackRate = 1; 


} 
// 进 程 更 新 函数 
function progressUpdate() { 


时 间 进 行 处 理 ， 保 留 两 位 小 数 ; 最后， 通过 innerHTML 方法 将 时 间 的 值 


// 页 面 加 载 时 执行 的 匿名 函数 
/获取 videoPlayer 元 素 
/通过 id 获取 span 元 素 
/播放 的 函数 

// 多 媒体 播放 时 的 方法 

// 多 媒体 暂停 时 的 方法 


// 单 击 “ 停 止 ” 按钮， 视频 停止 的 函数 
// 将 当前 播放 位 置 =0 

// 视 频 加 速 播放 的 函数 

/播放 速率 


// 视 频 减速 播放 的 函数 


// 视 频 以 正常 速度 播放 视频 的 函数 


var positionBar = document.getElementByld("positionBar");”// 通 过 id 获取 进度 条 元 素 


1/ 时间 转 换 为 进度 条 的 宽度 


positionBar.style.width = (video.currentTime / video.duration * 100) + "%"; 
/播放 时 间 通 过 innerHTML 方法 添加 到 span 标签 内 部 〈 进 度 条 ) ， 让 它 显示 于 页 面 
displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + ” 秒 "; 


} 
</script> 


本 例 的 运行 结果 如 图 9.2 所 示 。 
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gy alles | 
加 染 涉 二 Wj 的 方法 。 + x 
CC | © localhost:63342/Code/08/SL/01/01.html 图 女 | : 


播放 | | 暂停 停止 加速 播 放 | 减速 播放 | | 正常 速度 


图 9.2 多 媒体 播放 时 的 方法 和 属性 的 综合 运用 实例 
9.3.2 canPlayType(type) 方 法 


使 用 canPlayType(type) 方 法 测试 浏览 器 是 否 支 持 指定 的 媒介 类 型 ， 该 方法 的 定义 如 下 。 

01 var support=videoElement.canPlayType(type); 

videoElement 表示 页 面 上 的 video 元 素 或 audio 元 素 。 该 方法 使 用 一 个 参数 type， 该 参数 的 指定 方 
法 与 source 元 素 的 type 参数 的 指定 方法 相同 ， 都 用 播放 文件 的 MIME 类 型 来 指定 ， 可 以 在 指定 的 字符 
串 中 加 上 表示 媒体 编码 格式 的 codes 参数 。 

canPlayType(type) 方 法 返回 3 个 可 能 值 〈 均 为 浏览 器 判断 的 结果 )。 

回 “” 空 字符 串 : 浏览 器 不 支持 此 种 媒体 类 型 。 

回 ”maybe: 浏览 器 可 能 支持 此 种 媒体 类 型 。 

回 ”probably: 浏览 器 确定 支持 此 种 媒体 类 型 。 


9.4 多 媒体 元 素 重要 事件 


9.4.1 事件 处 理 方式 


在 利用 video 元 素 或 audio 元 素 读 取 或 播放 媒体 数据 时 ， 会 触发 一 系列 的 事件 ， 如 果 用 JavaScript 
脚本 捕捉 这 些 事件 ， 就 可 以 对 这 些 事件 进行 处 理 了 。 对 于 这 些 事件 的 捕捉 及 其 处 理 ， 可 以 按 两 种 方式 
来 进行 。 

一 种 是 监听 的 方式 : addEventListener( 事 件 名 ,处 理 函 数 ,处 理 方式 ) 方 法 来 对 事件 的 发 生 进 行 监听 ， 
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该 方法 的 定义 如 下 。 


01 


VideoElement.addEventListener(type,listener,useCapture); 


videoElement 表示 页 面 上 的 video 元 素 或 audio 元 素 。type 为 事件 名 称 ，listener 表示 绑 定 的 函数 ， 
useCapture 是 一 个 布尔 值 ,表示 该 事件 的 响应 顺序 。 该 值 如 果 为 tue， 则 浏览 器 采用 Capture 响应 方式 ; 
如 果 为 false， 则 浏览 器 采用 bubbing 响应 方式 ， 一 般 该 值 为 false。 

另 一 种 是 直接 赋值 的 方式 。 事件 处 理 方式 为 JavaScript 脚本 中 常见 的 获取 事件 句柄 的 方式 ， 代 码 


如 下 。 


01 
02 
03 { 
04 
05 


9.4.2 


<video id="video1" src="mrsoft.mov" onplay="begin_playing()"></video> 
function begin_playing() 


.…【〔 省 略 代码 ) 
上 


事件 介绍 


浏览 器 在 请 求 媒 体 数 据 、 下 载 媒 体 数据 、 播 放 媒体 数据 ， 一 直到 播放 结束 这 一 系列 过 程 中 ， 到 底 
会 触发 哪些 事件 ， 接 下 来 将 具体 介绍 。 


办 办 办 办 办 罗 加 加 回回 回回 罗 加 


加 


加 


loadstart 事件 : 浏览 器 开始 请 求 媒介 。 

progress 事件 : 浏览 器 正在 获取 媒介 。 

suspend 事件 : 浏览 器 非 主动 获取 媒介 数据 ， 但 没有 全 部 加 载 媒介 资源 。 

abort 事件 : 浏览 器 在 完全 加 载 前 中 止 获取 媒介 数据 ， 但 是 并 不 是 由 错误 引起 的 。 

error 事件 ， 获 取 媒 介 数 据 出 错 。 

emptied 事件 : 媒介 元 素 的 网 络 状态 突然 变 为 未 初始 化 ， 可 能 引起 的 原因 有 两 个 : 一 个 是 载 入 
媒体 过 程 中 突然 发 生 一 个 致命 错误 ， 另 一 个 是 在 浏览 器 正在 选择 支持 的 播放 格式 时 ， 又 调用 
了 load 方法 重新 载 入 媒体 。 

stalled 事件 : 浏览 器 获取 媒介 数据 异常 。 

play 事件 : 即将 开始 播放 ， 当 执行 了 play 方法 时 触发 , 或 数据 下 载 后 元 素 被 设 为 autoplay ( 自 
动 播放 ) 属性 。 

pause 事件 : 暂停 播放 ， 当 执行 了 pause 方法 时 触发 。 

loadedmetadata 事件 : 浏览 器 获取 完 媒介 资源 的 时 长 和 字 节 。 

loadeddata 事件 : 浏览 器 已 加 载 当 前 播放 位 置 的 媒介 数据 。 

waiting 事件 : 播放 由 于 下 一 帧 无 效 (如 未 加 载 ) 而 已 停止 (但 浏览 器 确认 下 一 帧 会 马上 有 效 )。 
playing 事件 : 已 经 开始 播放 。 

canplay 事件 : 浏览 器 能 够 开始 媒介 播放 ， 但 估计 以 当前 速率 播放 不 能 直接 将 媒介 播放 完 〈 播 
放 期 间 需要 缓冲 )。 

canplaythrough 事件 : 浏览 器 估计 以 当前 速率 直接 播放 可 以 直接 播放 完整 个 媒介 资源 (其间 不 
需要 缓冲 )。 

seeking 事件 : 浏览 器 正在 请 求 数据 (seeking 属性 值 为 true )。 
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seeked 事件 : 浏览 器 停止 请 求 数据 (seeking 属性 值 为 false)。 

timeupdate 事件 : 当前 播放 位 置 (currentTime 属性 ) 改变 ， 可 能 是 播放 过 程 中 的 自然 改变 ， 
也 可 能 是 被 人 为 地 改变 ， 或 由 于 播放 不 能 连续 而 发 生 的 跳 变 。 

回 ended 事件 : 播放 由 于 媒介 结束 而 停止 。 

回 ratechange 事件 : 默认 播放 速率 (defaultPlaybackRate 属性 ) 改变 或 播放 速率 (playbackRate 
属性 ) 改变 。 

回 durationchange 事件 : 媒介 时 长 (duration 属性 ) 改变 。 

加 ”volumechange 事件 ， 音量 (volume 属性 ) 改变 或 静音 (muted 属性 )。 


9.4.3 事件 实例 


| 


浏览 器 在 请 求 媒体 数据 、 下 载 媒体 数据 、 播 放 媒体 数据 ， 一 直到 播放 结束 这 一 系列 过 程 中 ， 所 触 
发 一 些 事件 ， 接 下 来 我 们 来 通过 一 个 实例 ， 具 体 运用 一 下 。 

例 9.02 ”本 例 将 在 页 面 中 显示 要 播放 的 多 媒体 文件 ， 同 时 显示 多 媒体 文件 的 总 时 间 ， 当 单 击 “ 播 
放 ” 按 钮 时 ， 将 显示 当前 播放 的 时 间 。 多 媒体 文件 的 总 时 间 与 当前 时 间 将 以 〈 秒 / 秒 ) 的 形式 显示 。( 实 
例 位 置 : 资源 包 \ 源 码 \09\9.02 ) 

本 例 实 现 的 步 又 如 下 。 

(1) 通过 <video> 标 签 添加 多 媒体 文件 ， 代 码 如 下 。 

01 ”<!- 添 加 视频 --> 

02 ”<video id="video"> 

03 <source src="butterfly.mp4" type="video/mp4" /> 

04 <source src="butterfly.webm" type="video/webm" /> 

05 </video> 


(2) 在 页 面 中 添加 <button> 和 <span> 标 签 ， 分 别 表示 媒体 播放 的 总 时 间 和 当前 播放 时 间 。 实 现 的 
HTML 代码 如 下 。 
01 ”<!- 播 放 按钮 和 播放 时 间 --> 
02 <button id="playButton” onclick="playOrPauseVideo()"> 播 放 </button> 
03 <span id="time"></span> 
(3) 给 video 元 素 添加 事件 监听 ， 用 addEventListener 方法 对 playEvent 事件 进行 监听 (loadeddata 
事件 :浏览 器 已 加 载 当前 播放 位 置 的 媒介 数据 ), 在 该 函数 中 用 秒 来 显示 当前 播放 时 间 。 同 时 触发 onclick 
事件 ， 调 用 play0 方 法 。 在 这 个 事件 中 对 播放 的 进度 进行 判断 ， 当 播放 完成 后 ， 将 当前 播放 位 置 
currentTime 置 0， 并 且 通 过 三 元 运算 符 执行 播放 或 者 是 和 暂停。 其 实现 的 代码 如 下 。 


01 /播放 暂停 

02 var play=document.getElementByld("playButton"™); 1/ 获取 按钮 元 素 

03 play.onclick = function (){ 

04 if (video.ended) { 1/ 如果 媒体 播放 结束 ， 播 放 时 间 从 0 开始 
05 video.currentTime = 0; 

06 } 

07 video[video.paused ? 'play' : 'pause'](); // 通 过 三 元 运算 执行 播放 和 暂停 
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上 


video.addEventListener('play", playEvent, false); 

video.addEventListener('pause'" pausedEvent, false); 

video.addEventListener('‘ended", function (){ 
this.pause(); 

}, false); 

} 


/使 用 事件 播放 
/播放 暂停 
/播放 结束 后 停止 播放 
/显示 暂停 播放 


(4) 显示 播放 时 间 : 获取 video 元 素 的 currentTime 属性 值 和 duration 属性 值 ，currentTime 属性 值 
和 duration 属性 值 默认 的 单位 是 秒 ， 当 前 播放 时 间 是 以 “当前 时 间 / 总 时 间 ” 的 形式 输出 。 有 具体 的 实现 
方法 是 : 首先 ， 通过 currentTime 和 duration 属性 ， 获 取 到 当前 播放 位 置 和 视频 播放 总 时 间 ， 利 用 Math. 
floor 对 获取 的 时 间 进 行 取 整 ; 最 后 通过 innerHTML 方法 将 值 写 入 <span> 标 签 内 即 可 。 其 具体 实现 的 代 


码 如 下 。 


01 
02 
03 


// 显 示 时 间 进 度 

function playOrPauseVideo() { 
Var video = document.getElementByld("video"); 
/使 用 事件 监听 方式 ， 捕 捉 timeupdate 事件 


video.addEventListener("timeupdate", function (){ 
var timeDisplay = document.getElementByld("time"); 


// 用 秒 数 来 显示 当前 播放 进度 


timeDisplay.innerHTML = Math.floor(video.currentTime) + " / " + Math.floor(video.duration) + ”( 秒 )"; 


}, false); 


(5) 使 用 video 元 素 的 addEventListener 方法 对 play、pause、ended 等 事件 进行 监听 ， 同 时 绑 定 
playEvent、pausedEvent 函数 ， 在 这 两 个 函数 中 ， 实 现 了 按钮 交替 地 显示 文字 “播放 ”和 “暂停 >。 代 


码 如 下 。 


01 
02 
03 
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// 绑 定 onclick 事件 : 播放 暂停 
var play = document.getElementByld("playButton "); 
play.onclick = function (){ 
if (video.ended){ 
video.currentTime = 0; 


} 
video[video.paused ? "play' : "pause"](); 


上 
/按钮 交 蔡 地 显示 “播放 ”和 “暂停 
video.addEventListener('play', playEvent, false); 
video.addEventListener('pause', pausedEvent, false); 
video.addEventListener('ended', function (){ 
this.pause(); 
}, false); 
function playEvent() { 
Video.play(); 
play.innerHTML = ' 暂 停 '; 
} 
function pausedEvent() { 
video.pause(); 


/获取 按钮 元 素 


Wended 为 video 元 素 的 属性 
// 如 果 媒 体 播放 结束 ， 播 放 时 间 从 0 开始 


// 通 过 三 元 运算 执行 播放 和 暂停 


/使 用 事件 播放 

/播放 暂停 
/播放 结束 后 停止 播放 
/显示 暂停 播放 
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2 play.innerHTML = "播放 "; 
2 


本 例 的 运行 结果 如 图 9.3 所 示 。 


CG @ fileyW/HYH5 零 基础 源码 /Code/08/SH02/02.html 


暂 售 |6110 ( 秒 ) 


9.3 addEventListener 添加 多 媒体 事件 实例 
9.5 水 结 


本 章 介绍 了 HTML5 audio 元 素 和 video 元 素 的 用 法 ， 并 演示 了 如 何 使 用 它们 构建 引入 web 应 用 。 
audio 元 素 和 video 元 素 的 引入 ， 让 HTML5 应 用 在 对 媒体 的 使 用 上 多 了 一 种 选择 : 不 用 插件 即 可 播放 
音频 和 视频 。 此 外 ，audio 元 素 和 video 元 素 还 提供 了 通用 的 、 集 成 化 的 可 用 脚本 控制 的 API。 


9.6.1 实战 一 : 制作 音乐 小 球 

试 着 通过 媒体 播放 的 方法 ， 制 作 一 个 小 游戏 ， 在 小 球 弹跳 时 添加 音效 。( 资源 包 \ 源 码 \09\ 实 战 \01 ) 
9.6.2 ”实战 二 : 加 载 一 段 视频 文件 

试 着 通过 多 媒体 元 素 的 基本 属性 ， 让 video 元 素 加 载 一 段 视频 文件 。( 资源 包 \ 源 码 \09\ 实 战 \02 ) 
9.6.3 ”实战 三 : 制作 一 段 音频 文件 

试 着 通过 多 媒体 元 素 的 基本 属性 加 载 一 段 音频 。( 资源 包 \ 源 码 \09\ 实 战 \03 ) 
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HTML5 新 特性 
( 勋 a 视频 讲解 : S7 分 钟 ) 


自从 2010 年 HTML5 正式 推出 以 来 ， 就 受到 了 世界 各 大 浏览 器 的 热烈 欢迎 与 
支持 。HTML5 是 以 HTML4 为 基础 ， 对 HTML4 进行 了 大 量 的 修改 。 本 章 将 从 总 
体 上 介绍 HTML5 对 HTML4 进行 了 哪些 修改 ,HTML5 与 HTML4 之 间 比 较 大 的 区 


别 是 什么 


二 


学 习 摘 要 : 


ed 
Lad 
Lad 
Lad 
Lad 


谁 在 开发 HTML5 

HTML5 的 新 特性 

HTML5 和 HTML4 的 区 别 
新 增 和 废除 的 元 素 

新 增 的 属性 和 废除 的 属性 
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10.1 谁 在 开发 HTML5 


HTMLS 的 开发 主要 是 由 以 下 3 个 重要 组 织 来 完成 的 。 

回 WHATWG: 由 来 自 Apple、Mozilla、Google、Opera 等 浏览 器 厂商 的 人 组 成 , 成 立 于 2004 年 。 
WHATWG 开发 HTML 和 Web 应 用 API， 同 时 为 各 浏览 器 厂商 以 及 其 他 有 意向 的 组 织 提供 开 
放 式 合作 。 

回 W3C: W3C 下 辖 的 HTML 工作 组 目前 负责 发 布 HTML5 规范 。 

回 IETF (Internet Engineering Task Force， 互 联网 工程 任务 组 ): 这 个 任务 组 下 辖 的 HTTP 等 负责 
Internet 协议 的 团队 。HTMLS 定义 的 一 种 新 API (WebSocket API) 依赖 于 新 的 WebSocket 协 
议 ，IETF 工作 组 正在 开发 这 个 协议 。 

HTMLS5 的 正式 微 标 如 图 10.1 所 示 。 


图 10.1 HTML5 的 正式 徽标 


10.2 ”HTMLS 的 新 特性 


HTML5 给 人 们 带 来 了 众多 惊喜 ， 增 加 了 以 下 新 的 特性 。 
新 特性 基于 HTML、CSS、DOM 和 JavaScript。 
减少 了 对 外 部 插件 的 需求 (如 Flash)。 
更 优秀 的 错误 处 理 。 
更 多 取代 脚本 的 标记 。 
HTML5 独立 于 设备 。 
于 绘画 的 canvas 元 素 。 
日 于 媒介 回放 的 video 元 素 和 audio 元 素 。 
对 本 地 离线 存储 的 更 好 的 支持 。 
新 元 素 和 表单 控件 。 
而 这 些 新 特性 ， 在 当前 浏览 器 最 新 版 本 中 得 到 越 来 越 普遍 的 实现 ， 越 来 越 多 的 开发 者 开始 学 习 和 
使 用 这 些 新 特性 。 


1. 兼容 性 


虽然 到 了 HTML5 时 代 ， 但 并 不 代表 现在 用 HIML4 创建 出 来 的 网 站 必须 全 部 要 重建 。HTML5 并 
不 是 颠覆 性 的 革新 。 相 反 ， 实 际 上 HTML5 的 一 个 核心 理念 就 是 保持 一 切 新 特性 平滑 过 渡 。 一 旦 浏览 
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器 不 支持 HTMLS5 的 某 项 功能 ， 针 对 功能 的 备 选 行为 就 会 悄悄 进行 。 另 外 ， 互 联网 上 有 些 HTML 文档 
已 经 存在 了 20 多 年 ， 因 此 ， 支 持 所 有 现存 HIML 文档 是 非常 重要 的 。 

尽管 HTMLS 标准 的 一 些 特性 非常 具有 革命 性 , 但 是 HTML5 旨 在 进化 而 非 革命 。 这 一 点 正 是 通过 
兼容 性 体现 出 来 的 。 正 是 因为 保障 了 兼容 性 才能 让 人 们 毫 不 犹豫 地 选择 HTMLS5 开发 网 站 。 


2. 实用 性 和 用 户 优先 


HTML5 规范 是 基于 用 户 优先 准则 编写 的 ， 其 主要 宗旨 是 “用 户 即 上 帝 ”， 这 意味 着 在 遇 到 无 法 解 
决 的 冲突 时 ， 规 范 会 把 用 户 放 到 第 一 位 ， 其 次 是 页 面 的 作者 ， 再 次 是 实现 者 〈 或 浏览 器 )， 接 着 是 规范 
制定 者 ， 最 后 才 考 虑 理论 的 纯粹 实现 。 因 此 ，HTML5 的 绝 大 部 分 是 实用 的 ， 只 是 有 些 情况 下 还 不 够 完 
美 。 实 用 性 是 指 要 求 能 够 解决 实际 问题 。HTML5 内 只 封装 了 切实 有 用 的 功能 ， 不 封装 复杂 而 没有 实际 
意义 的 功能 。 


3. 化 繁 为 简 


HTMLS5 要 的 就 是 简单 、 避 免 不 必要 的 复杂 性 。 HTML5 的 口号 是 “简单 至 上 , 尽 可 能 简化 ”。 因此， 
HTMLS5 做 了 以 下 改进 。 

回 以 浏览 器 原生 能 力 蔡 代 复杂 的 JavaScript 代码 。 

回 新 的 简化 的 DOCTYPE。 

回 新 的 简化 的 字符 集 声明 。 

回 ”简单 而 强大 的 HTIML5API。 

我 们 会 在 以 后 的 章节 中 将 详细 讲解 这 些 改 进 。 

为 了 实现 这 些 简化 操作 ，HTMLS 规范 已 经 变 得 非常 大 ， 因 为 它 需 要 更 大 的 精确 。 实 际 上 要 比 以 往 
任何 版 本 的 HTML 规范 都 要 精确 。 为 了 能 够 真正 实现 浏览 器 互通 的 目标 ， HTMLS5 规范 制订 了 一 系列 
定义 明确 的 行为 ， 任 何 歧义 和 含糊 都 可 能 延缓 这 一 目标 的 实现 。 

另外 ，HTMLS 规范 比 以 往 的 任何 版 本 都 要 详细 ， 为 的 是 避免 造成 误解 。HTML5 规范 的 目标 是 完 
全 、 彻 底 地 给 出 定义 ， 特 别 是 对 Web 应 用 。 

基于 多 种 改进 过 的 、 强 大 的 错误 处 理 方案 ,HTMLS5 具备 了 良好 的 错误 处 理 机 制 。 非常 有 现实 意义 
的 一 点 是 ，HTMLS5 提倡 重大 错误 的 平缓 恢复 ， 再 次 把 最 终 用 户 的 利益 放 在 了 第 一 位 。 例 如 ， 如 果 页 面 
中 有 错误 的 话 ， 在 以 前 可 能 会 影响 整个 页 面 的 显示 ， 而 HTMLS5 不 会 出 现 这 种 情况 ， 取 而 代 之 的 是 以 
标准 方式 显示 broken 标记 ， 这 要 归功 于 HTML5 中 精确 定义 的 错误 恢复 机 制 。 


4. 无 插件 范式 


过 去 ,很 多 功能 只 能 通过 插件 或 者 复杂 的 hack( 本 地 绘图 API、 本 地 socket 等 ) 来 实现 ,但 在 HTML5 
中 提供 了 对 这 些 功能 的 原生 支持 。 插 件 的 方式 存在 以 下 问题 。 

插件 安装 可 能 失败 。 

回 ”插件 可 能 被 禁用 或 者 是 屏蔽 。 

插件 自身 会 成 为 被 攻击 的 对 象 。 

插件 不 容易 与 HTML 文档 的 其 他 部 分 集成 〈 因 为 插件 边界 、 剪 裁 和 透明 度 问 题 )。 

虽然 一 些 揪 件 的 安装 率 很 高 ， 但 在 控制 严格 的 公司 内 部 网 络 环境 中 经 常会 被 封锁 。 此 外 ， 由 于 插 
件 经 常 还 会 给 用 户 带 来 烦人 的 广告 ， 一 些 用 户 会 选择 屏蔽 此 类 插件 。 如 果 这 样 做 的 话 ， 一 旦 用 户 禁 用 
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了 插件 ， 就 意味 着 依赖 该 插件 显示 的 内 容 将 无 法 表现 出 来 了 。 

在 我 们 已 经 设计 好 的 页 面 中 ， 要 想 把 插件 显示 的 内 容 与 页 面 上 其 他 元 素 集成 也 比较 困难 ， 因 为 会 

引起 剪裁 和 透明 度 等 问题 。 插 件 使 用 的 是 自 带 的 模式 ， 与 普通 Web 页 面 所 使 用 的 不 一 样 ， 所 以 当 弹 出 
菜单 或 者 其 他 可 视 化 元 素 与 插件 重 又 时 ， 会 特别 麻烦 。 这 时 ， 就 需要 HTML5 应 用 原生 功能 来 解决 ， 
它 可 以 直接 用 CSS 和 JavaScript 的 方式 控制 页 面 布局 。 实 际 上 这 也 是 HTMLS5 的 最 大 亮点 ， 显 示 了 先 
前 任何 HTML 版 本 都 不 具备 的 强大 能 力 。HTML5 不 仅仅 是 提供 新 元 素 支持 新 功能 ， 更 重要 的 是 添加 
了 对 脚本 和 布局 之 间 的 原生 交互 能 力 ， 鉴 于 此 我 们 可 以 实现 以 前 不 能 实现 的 效果 。 
以 HTMLS5 中 的 canvas 元 素 为 例 ， 有 很 多 非常 底层 的 事情 以 前 是 没 办 法 做 到 的 (例如 ,在 HTML4 
的 页 面 中 就 很 难 画 出 对 角 线 )， 而 有 了 canvas 就 可 以 很 容易 实现 。 更 为 重要 的 是 新 API 释放 出 来 的 潜 
能 ， 以 及 仅 需 窒 容 几 行 CSS 代码 就 能 完成 布局 的 能 力 。 基 于 HTML5 的 各 类 API 的 优秀 设计 ， 我 们 可 
以 轻松 地 对 它们 进行 组 合 应 用 。HTML5 的 不 同 功能 组 合 应 用 为 Web 开发 注入 了 一 股 强大 的 新 生 力 量 


10.3 HIMLS 和 HTML4 的 区 别 


10.3.1 HTML5 的 语法 变化 


在 HTML5 中 ， 语 法 发 生 了 很 大 的 变化 ， 主 要 有 以 下 几 个 原因 。 
(1) 现 有 浏览 器 与 规范 背离 。 

HTML 的 语法 是 在 SGML (Standard Generalized Markup Language) 语言 来 规定 语法 的 。 但 是 由 于 
SGML 的 语法 非常 复杂 ,文档 结构 解析 程序 的 开发 也 不 太 容 易 ， 多 数 Web 浏览 器 不 作为 SGML 解析 器 
运行 。 由 此 ，HTML 规范 中 虽然 要 求 “ 应 遵循 SGML 的 语法 ”， 但 实际 情况 却 是 遵循 规范 的 实现 (Web 
浏览 器 ) 几乎 不 存在 。 

(2) 规范 向 实现 靠拢 。 

如 上 所 述 ，HTML5 中 提高 Web 浏览 器 问 的 兼容 性 也 是 重大 的 目标 之 一 。 要 确保 兼容 性 ， 必 须 消 
除 规 范 与 实现 的 背离 。 因 此 HTML5 以 近似 现 有 的 实现 ， 重 新 定义 了 新 的 HTML 语法 ， 即 使 规范 向 实 
现 靠拢 。 

由 于 文档 结构 解析 的 算法 也 有 着 详细 的 记载 ， 使 得 Web 浏览 器 厂商 可 以 专注 于 遵循 规范 去 进行 实 
现 工作 。 在 新 版 本 的 FireFox 和 WebKit (Nightly Builder 版 ) 中 ， 已 经 内 置 了 遵循 HIMLS 规范 的 解析 
器 。 正 〈Intemet Explorer) 和 Opera 也 为 了 提供 兼容 性 更 好 地 实现 而 紧锣密鼓 地 努力 着 。 


10.3.2 HTML5 中 的 标记 方法 


在 HIML5 中 ， 标 记 方 法 主要 包括 以 下 几 种 。 

1. 内 容 类 型 (ContentType) 

HTML5 文件 的 扩展 名 和 内 容 类 型 ContentType) 没有 发 生变 化 ， 即 扩展 名 还 是 .html 或 htm， 内 
容 类 型 (ContentType) 还 是 .text/html。 


161 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


2. DOCTYPE 声明 


要 使 用 HIML5 标记 ， 必 须 先 进行 DOCTYPE 声明 。Web 浏览 器 通过 判断 文件 开头 有 没有 这 个 声 
明 ， 让 解析 器 和 泻 染 类 型 切换 成 对 应 HTMLS 的 模式 ， 代 码 如 下 。 


01 <!IDOCTYPE html> 


另外 ， 当 使 用 工具 时 ， 也 可 以 在 DOCTYPE 声明 方法 中 加 入 SYSTEM 标识 (不 区 分 大 小 写 ， 此 外 
还 可 将 双 引 号 换 为 单 引 号 来 使 用 )， 代 码 如 下 。 


01 <!IDOCTYPE HTML SYSTEM "about:legacy-compat"> 


3. 字符 编码 的 设置 

字符 编码 的 设置 方法 也 有 些 新 的 变化 。 以 前 ， 设 置 HTML 文件 的 字符 编码 时 ， 需 要 使 用 meta 元 
素 ， 代 码 如 下 。 

01 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 

在 HIML5 中 ， 可 以 使 用 <meta> 元 素 的 新 属性 charset 来 设置 字符 编码 ， 代 码 如 下 。 

01 <meta charset="UTF-8"> 

以 上 两 种 方法 都 有 效 ， 因 此 也 可 以 继续 使 用 前 者 的 方法 (通过 content 元 素 的 属性 来 设置 )， 但 要 
注意 不 能 同时 使 用 。 如 下 所 示 代 码 的 使 用 方法 是 错误 的 。 

01 ”<!- 不 能 混合 使 用 charset 属性 和 http-equiv 属性 --> 

02 <meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
伟 o 注 总 

从 HTML5 开始 ， 文 件 的 字符 编码 推荐 使 用 UTF-8。 


10.3.3 ”HTML5 语法 中 需要 掌握 的 几 个 要 点 


HTML5 中 规定 的 语法 ， 在 设计 上 兼顾 了 与 现 有 HTML 之 问 最 大 程度 的 兼容 性 。 例 如 ， 在 Web 上 
充斥 着 “<p> 没 有 结束 标签 ”等 HTML 现象 。HITML5 没有 将 这 些 视 为 错误 ， 反 而 采取 了 “允许 这 些 现 
象 存在 ， 并 明确 记录 在 规范 中 ”的 方法 。 因此， 尽管 与 XHTML 相 比 标记 比较 简洁 ， 而 在 遵循 HTML5 
的 Web 浏览 器 中 也 能 保证 生成 相同 的 DOM。 下 面 就 来 看 看 具体 的 HTMLS5 语法 。 


1. 可 以 省 略 标签 的 元 素 


在 HTML5 中 ， 有 些 元 素 可 以 省 略 标签 。 主 要 有 以 下 两 种 情况 。 

(1) 可 以 省 略 结束 标签 的 元 素 。 主 要 有 1i、dt、dd、p、rt、mp、optgroup 、option 、colgroup 、thead、 
tbody、tfoot、tr、td 和 也 元 素 。 

(2) 可 以 省 略 整个 标签 的 元 素 ( 即 连 开 始 标签 都 不 用 写 明 〉。 主要 有 html、head、body、colgroup 
和 tbody。 需 要 注意 的 是 ， 虽然 这 些 元 素 可 以 省 略 ， 但 实际 上 却 是 隐 式 存在 的 。 例 如 ，<body> 标 签 可 以 
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省 略 ， 但 在 DOM 树 上 它 是 存在 的 ， 可 以 永恒 访问 到 document.body。 

2. 不 允许 写 结束 标签 的 元 素 

不 允许 写 结束 标签 的 元 素 是 指 ， 不 允许 使 用 开始 标签 与 结束 标签 将 元 素 括 起 来 的 的 形式 ， 只 允许 
使 用 < 元 素 /> 的 形式 进行 书写 。 例 如 ,“<br>...</br>” 的 写法 是 错误 的 ， 应 该 写成 <br>。 当 然 ， 沿 袭 下 
来 的 <br> 这 种 写法 也 是 允许 的 。 不 允许 写 结束 标签 的 元 素 有 area、base、br、col、command、embed、 
hr、 img、input、keygen、link、meta、param、source、track 和 wbr。 

3. 人 允许 省 略 属性 值 的 属性 

取得 布尔 值 (Boolean) 的 属性 ， 如 disabled、readonly 等 ， 通 过 省 略 属性 的 值 来 表达 “ 值 为 true”。 
如 果 要 表达 “ 值 为 false”， 则 直接 省 略 属性 本 身 即 可 。 此 外 ， 在 写 明 属性 值 来 表达 “ 值 为 tue” 时 ， 可 
以 将 属性 值 设 为 属性 名 称 本 身 ， 也 可 以 将 值 设 为 空 字符 串 。 例 如 : 


01 ”<!-- 以 下 的 checked 属性 值 皆 为 true--> 

02 <input type="checkbox" checked> 

03 <input type="checkbox" checked="checked"> 

04 <inputtype="checkbox" checked="> 

表 10.1 列 出 了 HTMLS5 中 允许 省 略 属 性 值 的 属性 。 


表 10.1 HTML5 中 允许 省 略 属性 值 的 属性 


HTML5 属性 XHTML 语法 
checked checked="checked" 
Teadonl Teadonly= "readonly” 
disabled disablcd="disabled" 
selected selected="selected" 
defer defet="defer" 
ismap ismap="ismap" 
nohref nohref="nohref’” 
noshade noshade="noshade” 
nowrap nowrap="nowrap" 
multiple multiple="multiple" 
noresize noresize="noresize" 


4、 可 以 省 略 引用 符 的 属性 
设置 属性 值 时 ， 可 以 使 用 双 引 号 或 单 引号 来 引用 。 而 在 HTML 语法 中 ， 要 是 属性 值 不 包含 “空格 ” 
等 字符 ， 都 可 以 省 略 属性 的 引用 符 。 例 如 : 


01 <inputtype="text"> 
02 <input type='text> 
03 <input type=text> 


在 上 面 这 3 行 代 码 中 , type 的 属性 值 为 text， 没 有 上 面 提 及 的 几 种 字符 ， 所 以 可 以 省 略 双 引号 和 单 
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例 10.01 在 HIML5 
制作 区 域 图 像 映 射 ， 当 单 


中 ，area 元 素 是 不 允许 写 结束 标签 的 元 素 , 在 这 个 实例 中 , 运用 <area> 标 签 ， 


F<area> 标 签 所 指定 的 区 域 (coords) 时 , 页 面 就 会 跳 转 , 跳 转 的 链接 就 是 href 


所 指定 的 url。( 实例 位 置 : 资源 包 \ 源 码 \10\10.01 ) 
本 示例 主要 运用 coords 和 href 两 个 属性 来 实现 ， 具 体 代码 如 下 。 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 ”<title>area 标签 </title> 

06 </head> 

07 <bo 

08 <p> 单 击 太 阳 或 其 他 行星 ， 注 意 变化 : </p> 
09 
10 


<map name="planetmap"> 
<!-href 规定 区 域 的 目标 URL--> 
<!-shape 规定 区 域 的 形状 --> 
<!--coords 规定 区 域 的 坐标 --> 
<area shape="rect" coords="0,10,82,400" alt="Sun" href="images/sun.gif"> 
<area shape="circle" coords="150,90,20" alt="Venus" href="images/venglobe.gif"> 
<area shape="circle" coords="110,93,8" alt="Mercury" href="#"> 
</map> 
</body> 
</html> 


运行 结果 如 图 10.2 所 示 。 


10.2 ”<area> 标 签 的 区 域 图 像 映射 实例 


10.4 新 增 和 废除 的 元 素 


10.4.1 


新 增 的 结构 元 素 
在 HIML5 中 ， 新 增 了 以 下 与 结构 相关 的 元 素 。 
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1. section 元 素 


section 元 素 定义 文档 或 应 用 程序 中 的 一 个 区 段 ， 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 它 可 
以 与 hl、h2、h3、h4、h5 以 及 h6 元 素 结合 起 来 使 用 ， 标 示 文 档 结构 。 
HTMLS5 中 代码 示例 : 


01 <section>...</section> 
HTML4 中 代码 示例 : 


01 <div>...</div> 


2. article 元 素 

article 元 素 表示 文档 中 的 一 块 独立 的 内 容 ， 如 博客 中 的 一 篇 文章 或 报纸 中 的 一 篇 文章 。 
HTML5 中 代码 示例 : 

01 <article>...</article> 

HTML4 中 代码 示例 : 

01 <div class="article">...</div> 


3. header 元 素 

header 元 素 表示 页 面 中 一 个 内 容 区 块 或 整个 页 面 的 标题 。 
HTMLS5 中 代码 示例 : 

01 <header>...</header> 


HTML4 中 代码 示例 : 


01 <div>...</div> 


4. nav 元 素 

nav 元 素 表示 导航 链接 的 部 分 。 
HTML5 中 代码 示例 : 

01 <nav>...</nav> 

HTML4 中 代码 示例 : 


01 <ul>...</ul> 


5. footer 元 素 

footer 元 素 表 示 整 个 页 面 或 页 面 中 一 个 内 容 区 块 的 脚注 。 一 般 来 说 ， 它 会 包含 创作 者 的 姓名 、 文 档 
的 创作 日 期 以 及 创建 者 联系 信息 。 

HIMLS 中 代码 示例 : 

01 <footer>...</footer> 
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HTML4 中 代码 示例 : 


01 <div>...</div> 


例 10.02 在 本 实例 中 , 第 一 个 nav 元 素 用 于 页 面 外 的 导航 , 将 页 面 跳 转 到 其 他 页 面 上 去 ( 跳 转 到 
网 站 主页 或 开发 文档 目录 页 面 ); 第 二 个 nav 元 素 放置 在 article 元 素 中 ， 用 作 这 篇 文章 中 组 成 部 分 的 页 
内 导航 。 关 键 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \10\10.02 ) 

01 <body> 


02 ”<h1> 明 日 学 院 </h1> 
03 ”<!- 第 一 个 nav 元 素 用 于 页 面 的 导航 ， 将 页 面 跳 转 到 其 他 页 面 上 去 --> 


04 <nav> 

05 <ul> 

06 <li><a href="www.mingrosoft.com"> 主 页 </a></li> 

07 <li><a href="www.mingrisoft.com/login.html"> 登 录 www.</a></li> 

08 .More... 

09 </ul> 

10 </nav> 

11 <article> 

12 <header> 

13 <h1> 编 程 词 典 功能 介绍 </h1> 

14 <!-- 第 二 个 nav 元 素 用 作 页 内 导航 --> 

15 <nav> 

16 <ul> 

17 <li><a href="#gI"> 管 理 功能 </a></li> 

18 <li><a href="#kf"> 开 发 功能 </a></li> 

19 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 

20 .more... 

21 </ul> 

22 </nav> 

23 </header> 

24 <section id="gl"> 

25 <h1> 编 程 词典 的 入 门 模式 </h1> 

26 <p> 编 程 词典 的 入 门 模式 介绍 </p> 

27 </section> 

28 <section id="kf"> 

29 <h1> 编 程 词典 的 开发 模式 </h1> 

30 <p> 编 程 词典 的 开发 模式 介绍 </p> 

31 </section> 

32 .more... 

33 <footer> 

34 <p> 

35 <a href="?edit"> 编 辑 </a> | 

36 <a href="?delete"> 删 除 </a> | 

a7 <a href="?rename"> 重 命名 </a> 

38 </p> 

39 </footer> 
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41 <footer> 

42 <p><small> 版 权 所 有 : 明日 科技 </small></p> 
43 </footer> 

44 </body> 


运行 实例 ， 结 果 如 图 10.3 所 示 ， 图 中 的 蓝 色 文字 〈 即 带 下 画 线 的 ) 均 为 超 链接 ， 第 一 部 分 为 外 链 
接 ， 第 二 部 分 为 页 面 内 链接 ， 当 鼠标 单 击 “ 管 理 功能 ” 超 链接 时 ， 页 面 跳 转 到 篇 文章 对 应 的 部 分 ， 如 
图 10.4 所 示 。 


fr el | fi (| ~ | 
EE D Eu x Ss 
© | © 127.0.0.156352/previen/apf 田立 : € © | © 127.0.0156352/preview/apf 甸 女 | ; 
明日 学 院 
。 主 可 
。 登录 ar_ 
编程 词典 功能 介绍 a 
:和 编程 词典 的 入 门 模式 
编程 词典 的 入 门 模式 介绍 
编程 词 奥 的 开发 模式 
编程 词典 的 开发 模式 介绍 
的 缉 上吊 除 | 重 命名 
白 权 所 有 ， 明 日 科技 3 
tL 一 一 
图 10.3 nav 元 素 的 页 面 导航 应 用 10.4 nav 元 素 用 为 文章 中 组 成 部 分 的 页 内 导航 


注意 
人 这 里 需要 提醒 大 家 注意 的 是 , 在 HTML5 中 不 要 用 menu 元 素 代 替 nav 元 素 。 因为 menu 元 素 是 
用 在 一 系列 发 出 命令 的 菜单 上 的 ， 是 一 种 交互 性 的 元 素 ; 或 者 更 确切 地 说 是 使 用 在 Web 应 用 程序 
中 的 。 


10.4.2 ”新 增 的 块 级 〈block) 的 语义 元 素 


在 HIML5 中 ， 新 增 了 以 下 与 块 级 的 语义 相关 的 元 素 。 
1. aside 元 素 


aside 元 素 表示 article 元 素 的 内 容 之 外 的 与 article 元 素 的 内 容 相 关 的 有 关内 容 。 
HTMLS 中 代码 示例 : 


01 <aside>...</aside> 


例如 ， 运 用 aside 元 素 制作 诗词 的 注释 。HTML 文件 中 的 关键 代码 如 下 。 
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01 <body background="images/3.png"> 
02 <center> 
03 <!-- 使 用 figure 标签 标记 文档 中 一 个 图 片 --> 


04 <figure><img src="images/4.png"></figure> 
05 <header> 
06 <h1> 宋 词 赏析 </h1> 
07 </header> 
08 <article> 
09 <h1><strong> 水 调 歌 头 </strong></h1> 
10 <p>.… 但 愿 人 长 久 ， 千 里 共 婵娟 〈 文 章 正文 ) </p> 
gh <aside> 
12 <!-- 因 为 这 个 aside 元 素 被 放置 在 一 个 article 元 素 内 部 ， 
13 所 以 分 析 器 将 这 个 aside 元 素 的 内 容 理 解 成 是 和 article 元 素 的 内 容 相关 联 的 。--> 
14 <br/> 
每 <h1> 名 词 解释 </h1> 
16 <dl> 
17 <dt> 宋 词 </dt> 
18 <dd> 词 , 是 我 国 古 代 诗 歌 的 一 种 。 它 始 于 梁 代 , 形成 于 唐 代 而 极 盛 于 宋代 。( 全 部 文章 ) </dd> 
19 </dl> 
20 <dl> 
21 <dt> 婵 娟 </dt> 
22 <dd> 美 丽 的 月 光 </dd> 
23 </dl> 
24 </aside> 
25 </article> 
26 </center> 
27 </body> 
运行 效果 如 图 10.5 所 示 。 
Il) 
EE 
二 © ml12z7001 儿女 


宋词 舍 析 
水 调 歌 头 


…* 但 原 人 长 久 ， 干旱 共 境 如 (文章 正文 ) 


名 词 解释 


i 
向 是 我 国 古 代 计 到 的 种。 已 妈 于 当代 ， 形 成 于 良 代 而 性 碍 | 
于 示人 会 部 X 王 ) 


甜 丽 的 月 光 


图 10.5 aside 制作 诗词 注释 
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2. figure 元 素 

figure 元 素 表示 一 段 独立 的 流 内 容 ， 一 般 表 示 文 档 主体 内 容 中 的 一 个 独立 单元 。 使 用 <figcaption> 
元 素 为 figure 元 素 组 添加 标题 。 

HIMLS 中 代码 示例 : 


01 <figure> 

02 <figcaption>PRC</figcaption> 

03 <p>The People's Republic of China was born in 1949...</p> 
04 </figure> 


HTML4 中 代码 示例 : 


01 <dl> 

02 <h1>PRC</h1> 

03 <p>The People's Republic of China was born in 1949...</p> 
04 </dl> 


3. dialog 元 素 

dialog 标签 定义 对 话 ， 比 如 交谈 。 
人 0 注 总 

对 话 中 的 每 个 句子 都 必须 属于 <d 亿 标签 所 定义 的 部 分 。 

HTMLS5 中 代码 示例 : 

01 <dialog> 

02 ”<dt> 老师 </dt> 

03 ”<dd>2+2 等 于 ? </dd> 

04 ”<dt> 学生 </dt> 

05 <dd>4</dd> 

06 ”<dt> 老师 </dt> 


07 ”<dd> 答 对 了 ! </dd> 
08 </dialog> 


10.4.3 ”新 增 的 行内 (inline) 的 语义 元 素 


在 HIML5 中 ， 新 增 了 以 下 与 行内 的 语义 相关 的 元 素 。 

1. mark 元 素 

mark 元 素 主要 用 来 在 视觉 上 向 用 户 呈 现 那些 需要 突出 显示 或 高 亮 显示 的 文字 。 mark 元 素 的 一 个 比 
较 典 型 的 应 用 就 是 在 搜索 结果 中 向 用 户 高 亮 显示 搜索 关键 词 。 

HIMLS 中 代码 示例 : 


01 <mark>...</mark> 
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HTML4 中 代码 示例 : 


01 <span>...</span> 


2. time 元 素 
time 元 素 表示 日 期 或 时 间 ， 也 可 以 同时 表示 二 者 。 
HTMLS5 中 代码 示例 : 


01 <time>...</time> 
HTML4 中 代码 示例 : 


01 <span>...</span> 


3. progress 元 素 

progress 元 素 表 示 运 行 中 的 进程 。 可 以 使 用 progress 元 素来 显示 JavaScript 中 耗费 时 间 的 函数 的 
进程 。 

HTMLS5 中 代码 示例 : 


01 <progress>...</progress> 


4. meter 元 素 

meter 元 素 表示 度量 衡 。 仅 用 于 已 知 最 大 值 和 最 小 值 的 度量 。 必 须 定义 度量 的 范围 ， 既 可 以 在 元 素 
的 文本 中 ， 也 可 以 在 min/max 属性 中 定义 。 

HTMLS5 中 代码 示例 : 


01 <meter>...</meter> 


例 10.03 在 该 实例 中 通过 设置 meter 元 素 的 min 属性 和 max 属性 、low 属性 和 height 属性， 可 以 
得 到 颜色 不 同 的 柱状 图 。HTMLS5 文件 中 的 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \10\10.03 ) 


01 <ldoctype html> 
02 <html> 

03 <head> 

04 <meta charset="utf-8"> 
05 <title>meter 元 素 </title> 
06 </head> 


08 <body> 

09 ”<h3>2017 年 上 半年 某 公司 销售 额 </h3> 
10 ”<!-low 被 界定 为 低 值 的 
11 ”<!-high 被 界定 为 高 值 的 
12 ”<!-min 最 小 值 -> 

13 ”<!-max 最 大 值 -> 

14 “<p> 编 程 类 图 书 : <meter min="0" max="100" low="30" height="80" value="85"></meter>85 万 元 </p> 
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15 ”<p> 设 计 类 图 书 : <meter min="0" max="100" low="30" height="80" value="65"></meter>65 万 元 </p> 


16 ” ”<p> 数据库 类 图 书 : <meter min="0" max="100" low="30" height="80" value="25"></meter>25 万 元 </p> 
17 ”<p> 幼 儿 教 育 : <meter min="0" max="100" low="30" height="80" value="15"></meter>15 万 元 </p> 

18 <br/> 

19 ”<p style="color:red;font-weight: bold;">IE 浏览 器 不 支持 meter 标签 </p> 

20 </body> 

21 </html> 


运行 结果 如 图 10.6 所 示 。 


pe 一 > 一 | 
cl 8: 

2017 年 上 半年 某 公司 销售 额 

十 往 关 医书 85 万 元 

设计 类 回忆 : B65 万 元 

数据 库 类 图 节 25 万 元 

功 儿 教育 15 万 元 


注意 : IE 浏览 器 不 支持 meter 标 签 1 


图 10.6 ”meter 元 素 制作 柱状 图 
10.4.4 ”新 增 的 供 入 多 媒体 元 素 与 交互 性 元 素 


新 增 video 元 素 和 audio 元 素 。 顾 名 思 义 ， 分 别 是 用 来 插入 视频 和 声音 的 。 值 得 注意 的 是 ， 可 以 在 开 
始 标签 和 结束 标签 之 问 放置 文本 内 容 ， 这 样 旧版 本 的 浏览 器 就 可 以 显示 出 不 支持 该 标签 的 信息 。 例 如 : 
01 ”<video src="somevideo.wmv"> 您 的 浏览 器 不 支持 video 标签 。</video> 


HTML5 同时 也 叫 Web Applications 1.0， 因 此 也 进一步 发 展 交 互 能 力 。 以 下 这 些 标签 可 以 提高 页 面 
的 交互 体验 感受 。 
回 details 元 素 : 该 元 素 表示 用 户 要 求 得 到 并 且 可 以 得 到 的 细节 信息 。 它 可 以 与 summary 元 素 配 
合 使 用 。summary 元 素 提供 标题 或 图 例 。 标 题 是 可 见 的 ， 用 户 单 击 标题 时 ， 会 显示 出 details。 
summary 元 素 应 该 是 details 元 素 的 第 一 个 子 元 素 。 
HTML5 中 代码 示例 : 


01 <details><summary>HTML 5</summary> 

02 This document teaches you everything you have to learn about HTMLS. 

03 </details> 

回 ”datagrid 元 素 :该 元 素 表示 可 选 数据 的 列表 。 通 常用 于 显示 树 列 表 。 
HIML5 中 代码 示例 : 


01 <datagrid>...</datagrid> 


加 “menu 元 素 : 该 元 素 表 示 菜 单列 表 。 通 常用 于 列 出 表单 控件 。 
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HTMLS5S 中 代码 示例 : 


01 <menu> 
02 <li><input type="checkbox" />Red</li> 
03 <li><input type="checkbox" />blue</li> 
04 </menu> 


注意 
在 HIML4 中 不 推荐 使 用 menu 元 素 。 


加 ”command 元 素 : 该 元 素 表示 命令 按钮 ， 如 单 选 按 钮 、 复 选 框 或 普通 按钮 。 
HTML5 中 代码 示例 : 


01 <command onclick=cut()" label="cut"> 


10.4.5 ”新 增 的 input 元 素 的 类 型 


在 HTML5 中 ，input 元 素 新 增 了 以 下 类 型 。 

email 类 型 ， 用 于 应 该 包含 E-mail 地 址 的 输入 域 。 

url 类 型 ， 用 于 应 该 包含 URL 地 址 的 输入 域 。 

number 类 型 ， 用 于 应 该 包含 数值 的 输入 域 。 

range 类 型 ， 用 于 应 该 包含 一 定 范围 内 数字 值 的 输入 域 。 
search 类 型 ， 用 于 搜索 域 ， 比 如 站 点 搜索 或 谷歌 搜索 。search 域 显示 为 常规 的 文本 域 。 
Date Pickers (日 期 检 出 器 )。 

HTML5 中 拥有 以 下 多 个 可 供 选取 日 期 和 时 间 的 新 输入 类 型 。 
date 一 一 选取 日 、 月 、 年 。 

month 一 一 选取 月 、 年 。 

week 一 一 选取 周 和 年 。 

time 一 一 选取 时 间 (小 时 和 分 钟 )。 
datetime 一 一 选取 时 间 、 日 、 月 、 年 (UTC 时 间 )。 
datetime-local 一 一 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )。 


10.4.6 ”废除 的 元 素 


在 HTML5 中 ， 不 仅 新 增 了 一 些 元 素 ， 还 废除 了 很 多 元 素 ， 下 面 简单 介绍 一 下 被 废除 的 元 素 。 
1. 能 使 用 CSS 代 蔡 的 元 素 


对 于 basefont、big、center、font、s、strike、tt、u 这 些 元 素 ， 由 于 它们 的 功能 都 是 纯粹 为 画面 展 
示 服 务 的 , 而 在 HIML5 中 提倡 把 画面 展示 性 功能 放 在 CSS 样式 表 中 统一 编辑 ,所 以 将 这 些 元 素 废除 ， 
并 使 用 编辑 CSS 样式 表 的 方式 进行 替代 。 


国共 办 办 办 办 


办 办 办 
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2. 不 再 使 用 frame 框架 


由 于 frame 框架 对 页 面 存在 负面 影响 ,所 以 在 HTMLS 中 已 不 再 支持 frame 框架 ， 只 支持 这 ame 框 
架 ; 或 者 用 服务 器 方 创建 的 由 多 个 页 面 组 成 的 复合 页 面 的 形式 ， 同 时 将 frameset、frame 和 nofranes 这 
3 个 元 素 废除 。 

3. 只 有 部 分 浏览 器 支持 的 元 素 

由 于 只 有 部 分 浏览 器 支持 applet、bgsound、blink、marguee 等 元 素 ， 所 以 在 HIML5 中 将 这 几 个 元 
素 废除 。 其 中 ，applet 元 素 可 由 embed 元 素 蔡 代 ; bgsound 元 素 可 由 audio 元 素 蔡 代 ; marquee 元 素 可 
以 由 JavaScript 编程 的 方式 所 蔡 代 。 


10.5 新 增 的 属性 和 废除 的 属性 


10.5.1 新 增 的 属性 


在 HIML5 中 ， 新 增 了 一 些 属性 ， 也 废除 了 一 些 属性 。 下 面 将 详细 介绍 这 些 属性 。 
1. 表单 相关 的 属性 
新 增 的 与 表单 相关 的 元 素 如 下 。 
(1) autocomplete 属性 。 
autocomplete 属性 规定 form 或 input 域 应 该 拥有 自动 完成 功能 。 该 属性 适用 于 <form> 标 签 ， 也 适用 
于 <input> 标 签 的 类 型 ， 如 text、search、url、telephone、email、password、datepickers、range 和 color 
标签 。 
(2) autofocus 属性 。 
autofocus 属性 规定 在 页 面 加 载 时 ， 域 自动 地 获得 焦点 。 该 属性 适用 于 所 有 <input> 标 签 的 类 型 。 
(3) form 属性 。 
form 属性 规定 输入 域 所 属 的 一 个 或 多 个 表单 。 该 属性 适用 于 所 有 <input> 标 签 的 类 型 。 
(4) 表单 重 写 属性 。 
表单 重 写 属性 (form override attributes) 允许 重 写 form 元 素 的 某 些 属 性 设 定 。 表 单 重 写 属 性 如 下 。 
加 ”formaction 一 一 重 写 表单 的 action 属性 。 
加 ”formenctype 一 一 重 写 表 单 的 enctype 属性 。 
加 ”formmethod 一 一 重 写 表单 的 method 属性 。 
加 formnovalidate 重 写 表 单 的 novalidate 属性 。 
回 formtarget 重 写 表 单 的 target 属性 。 
表单 重 写 属性 适用 于 <input> 标 签 的 类 型 有 submit 和 image。 
(5) height 属性 和 width 属性 。 
Height 属性 和 width 属性 规定 用 于 image 类 型 的 <inpuf> 标 签 的 图 像 高 度 和 宽度 。 这 两 个 属性 只 适 
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用 于 image 类 型 的 <input> 标 签 。 
(6) list 属性 。 
list 属性 规定 输入 域 的 datalist， 而 datalist 是 输入 域 的 选项 列表 。 该 属性 适用 于 以 下 类 型 的 <input> 
标签 : text、search、url、telephone、email、date pickers、number、range 以 及 color。 
(7) min、max 和 step 属性 。 
min、max 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 类 型 规定 限定 约束 )。 
min 属性 规定 输入 域 所 允许 的 最 小 值 ; max 属性 规定 输入 域 所 允许 的 最 大 值 ; step 属性 为 输入 域 规 
定 合 法 的 数字 间隔 (如 果 step="3"， 则 合法 的 数 是 -3、0、3、6 等 )。min、max 和 step 这 3 个 属性 适用 
于 <input> 标 签 的 类 型 有 date pickers、number 以 及 range。 
(8) mnultiple 属性 。 
multiple 属性 规定 输入 域 中 可 选择 多 个 值 。 该 属性 适用 于 以 下 类 型 的 <input> 标 签 : email 和 file。 
(9) novalidate 属性 。 
novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 域 。 该 属性 适用 于 <form> 标 签 ， 还 适用 
于 <input> 标 签 ， 类 型 有 text、search、url、telephone、email、password、date pickers、range 和 color。 
(10) pattem 属性 。 
patter 属性 规定 用 于 验证 input 域 的 模式 (pattern)。 模 式 (pattermm) 是 正则 表达 式 。 该 属性 适用 于 
<input> 标 签 的 类 型 有 text、search、url、telephone、email 和 password。 
(11) placeholder 属性 。 
placeholder 属性 提供 一 种 提示 (hint)， 描 述 输入 域 所 期 待 的 值 。 该 属性 适用 于 <input> 标 签 的 类 型 
有 text、search、url、telephone、email 和 password。 
(12) required 属性 。 
required 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 )。 该 属性 适用 于 以 下 类 型 的 <input> 标 签 


text、search、url、telephone、email、password、date pickers、number、checkbox、radio 和 file。 
2. 链接 相关 属性 


新 增 的 与 链接 相关 的 属性 如 下 。 
(1) media 属性 。 
为 a 与 area 元 素 增加 了 media 属性 ， 该 属性 规定 目标 URL 是 为 什么 类 型 的 媒介 /设备 进行 优化 的 。 
该 属性 只 能 在 href 属性 存在 时 使 用 。 
(2) hreflang 属性 与 rel 属性 。 
为 area 元 素 增加 了 hreflang 属性 与 rel 属性 ， 以 保持 与 a 元 素 、link 元 素 的 一 致 性 。 
(3) sizes 属性 。 
为 link 元 素 增加 了 新 属性 sizes。 该 属性 可 以 与 icon 元 素 结合 使 用 (通过 rel 属性)， 用 于 指定 关联 
图 标 (icon 元 素 ) 的 大 小 。 
(4) target 属性 。 
为 base 元 素 增加 了 target 属性 ， 主 要 目的 是 保持 与 a 元 素 的 一 致 性 ， 同 时 由 于 target 元 素 在 Web 
应 用 程序 中 ， 尤 其 是 在 与 这 ame 结合 使 用 时 ， 是 非常 有 用 的 。 
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3. 其 他 属性 


除了 上 面 介绍 的 与 表单 和 链接 相关 的 属性 外 ，HTML5 还 增加 了 下 面 的 属性 。 
(1) reversed 属性 。 
为 ol 元 素 增加 属性 reversed， 它 指定 列表 倒序 显示 。li 元 素 的 value 属性 与 ol 元 素 的 start 属性 因 
为 它 不 是 被 显示 在 界面 上 的 ， 所 以 不 再 是 不 赞成 使 用 的 了 。 
(2) charset 属性 。 
为 meta 元 素 增加 charset 属性 , 因为 这 个 属性 已 经 被 广泛 支持 了 , 而 且 为 文档 的 字符 编码 的 指定 提 
供 了 一 种 比较 良好 的 方式 。 
(3) type 属性 与 label 属性 。 
为 menu 元 素 增加 了 两 个 新 的 属性 type 与 label。label 属性 为 菜单 定义 一 个 可 见 的 标注 ，type 属性 
让 菜单 可 以 以 上 下 文 菜单 、 工 具 条 、 列 表 菜 单 3 种 形式 出 现 。 
(4) scoped 属性 。 
为 style 元 素 增加 scoped 属性 , 用 来 规定 样式 的 作用 范围 , 比如 只 对 页 面 上 某 个 树 起 作用 ,为 script 
元 素 增加 async 属性 ， 它 定义 脚本 是 否 异步 执行 。 
(5) manifest 属性 。 
为 html 元 素 增加 属性 manifest， 开 发 离线 Web 应 用 程序 时 它 与 API 结合 使 用 ,定义 一 个 URL, 在 
这 个 URL 上 描述 文档 的 缓存 信息 。 为 这 ame 元 素 增加 sandbox、seamless 和 srcdoc 这 3 个 属性 ， 用 来 
提高 页 面 安全 性 ， 防 止 不 信任 的 Web 页 面 执行 某 些 操作 。 


10.5.2 ”废除 的 属性 


HTML4 中 的 一 些 属性 在 HTML5 中 不 再 被 使 用 ， 而 是 采用 其 他 属性 或 其 他 方案 进行 替换 ， 具 体 如 
表 10.2 所 示 。 


表 10.2 在 HTML5 中 被 废除 了 的 属性 


在 HTML4 中 使 用 的 属性 在 HTML5 中 的 蔡 代 方案 
TeV Tel 
charset 在 被 链接 的 资源 中 使 用 HITP Content-type 头 元 素 
shape、coords 使 用 area 元 素 代 替 a 元 素 
longdesc 使 用 a 元 素 链接 到 较 长 描述 
target 多 余 属性 ， 被 省 略 
nohref 多 余 属性 ， 被 省 略 
profile 多 余 属 性 ， 被 省 略 
Version 多 余 属 性 ， 被 省 略 
name id 
scheme 只 为 某 个 表单 域 使 用 scheme 


archive、 classid, codebase、 codetype、 
declare、standby 


使 用 data 与 type 属性 类 调用 插件 。 需 要 使 用 这 
些 属性 来 设置 参数 时 ， 使 用 param 属性 
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续 表 
在 HTML4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML5 中 的 蔡 代 方案 

valuetype、type 使 用 name 与 value 属性 ， 不 声明 值 的 mime 类 型 
使 用 以 明确 简洁 的 文字 开头 、 后 跟 详 述 文字 的 

axis、abbr 形式 。 可 以 对 更 详细 内 容 使 用 title 属性 ， 来 使 
单元 格 的 内 容 变 得 简短 

scope 在 被 链接 的 资源 中 使 用 HITP content-type 头 元 素 

caption、input、legend、div、 

i Mi i | 全 用 558 笠 式 胡 莹 从 

alink 、link、text\、vlink、background、 使 用 CSS 样式 表 蔡 代 

bgcolor 

align、bgcolor、border、cellpadding、 使 用 CSS 样式 表 普 代 


cellspacing、frame、rules、width 


ign、 、 ~ height、 、 
ee char、 charoff, height, nowrap. thody、 thead、 tfoot 使 用 CSS 样式 表 蔡 代 
valigl 
liay hero Hoey charoff, height、 使 用 CSS 样式 表 蔡 代 
nowrap、valign、width 


align、bgcolor、char、charoff、valign [rr | 使 用 CSS 样式 表 葵 代 


align、 char、 charoff、 valign、 width 使 用 CSS 样式 表 葵 代 
align、border、hspace、vspace 使 用 CSS 样式 表 替 代 
clear |btr | 使 用 Css 样式 表 痊 代 
compact、type 使 用 CSS 样式 表 替 代 
compact [lq | 使 用 CSS 样式 表 替 代 
compact [mm | 使 用 CSS 样式 表 蔡 代 
width 使 用 CSS 样式 表 蔡 代 
align、hspace、vspace [ing | 使 用 CSS 样式 表 替 代 
align、noshade、size、width | 使 用 CSS 样式 表 替 代 


lign 、 frameborder 、 lling 、 
| i 人 
marginwidth 


autosubmil [mm 


本 章 从 总 体 上 概要 介绍 了 HTML5 对 HIML4 进行 的 语法 和 标签 的 修改 , 同时 讲解 了 新 增 的 属性 及 
其 用 法 ， 并 以 实例 形式 进行 详细 的 讲解 。 读 者 通过 认真 学 习 能 很 快 地 掌握 HTML5 新 增 的 属性 。 同 时 
也 对 HIML5 中 废除 的 元 素 进 行 了 介绍 ， 避 免 读者 在 开发 中 应 用 废除 的 元 素 ， 而 延长 开发 时 间 。 最 后 ， 
介绍 了 HTMLS5 中 的 全 局 属性 ， 并 对 其 进行 了 详细 的 讲解 。 
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10.7 实 战 


实战 一 : 制作 一 个 图 像 链 接 


试 着 运用 <area> 标 签 制作 一 个 图 像 链 接 ， 如 图 10.7 所 示 。( 资源 包 \ 源 码 \10\ 实 战 \01 ) 


| 
一 
iminisurator/Desktopy/ 季 香 矶 HTML5/S9 重 /ty/0 妆 | 了 


图 10.7 运用 <area> 标 签 制作 一 个 图 像 链接 
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JavaScript 基础 
( 名 视频 讲解 2 小 时 13 分 钟 ) 


JavaScript 是 基于 对 象 {fobject-based) 的 语言 ， 已 经 被 广泛 用 于 网 页 应 用 开发 ， 
常用 来 为 网 页 添加 各 式 各 样 的 动态 功能 ,为 用 户 提供 更 流畅 美观 的 浏览 效果 。 本 章 
将 概括 地 讲解 JavaScript 的 基础 知识 点 。 

学 习 摘 要 : 

”JavaScript 概述 

WI ” JavaScript 语言 基础 

”JavaScript 对 象 编程 

WI ” JavaScript 事件 处 理 
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11.1 JavaScript 概述 


在 学 习 JavaScript 前 ， 需 要 了 解 什么 是 JavaScript，JavaScript 都 有 哪些 特点 ，JavaScript 
以 及 在 HTML 中 的 使 用 等 内 容 ， 通 过 了 解 这 些 内 容 来 增强 对 JavaScript 语言 的 理解 ， 便 于 更 好 地 运用 。 


11.1.1 JavaScript 的 发 展 史 


1. JavaScript 的 历史 起 源 


JavaScript 语言 的 前 身 是 LiveScript 语言 。 由 美国 Netscape (网 景 ) 公司 的 布 瑞 登 。 艾 克 (Brendan 
Eich) 为 Navigator 2.0 浏览 器 的 应 用 而 开发 的 脚本 语言 。 在 与 Sum ( 升 阳 ) 公司 联手 完成 了 LiveScript 
语言 的 开发 后 ，Netscape 公司 将 其 改名 为 JavaScript， 也 就 是 最 初 的 JavaScript 1.0 版 本 。 虽 然 当时 
JavaScript 1.0 版 本 还 有 很 多 缺陷 ， 但 拥有 着 JavaScript 1.0 版 本 的 Navigator 2.0 浏览 器 几乎 主宰 着 浏览 
器 市 场 。 

由 于 JavaScript 1.0 获得 了 成 功 , 因此 Netscape 公司 在 Navigator 3.0 浏览 器 中 又 发 布 了 JavaScript 1.1 
版 本 。 同 时 微软 开始 进军 浏览 器 市 场 , 发 布 了 Internet Explorer 3.0 并 搭载 了 一 个 JavaScript 的 类 似 版 本 ， 
其 注册 名 称 为 JScript， 这 成 为 JavaScript 语言 发 展 过 程 中 的 重要 一 步 。 

在 微软 进入 浏览 器 市 场 后 , 此 时 有 3 种 不 同 的 JavaScript 版 本 同时 存在 , Navigator 中 的 JavaScript、 
I 下 中 的 JScript 以 及 CEnvi 中 的 ScriptEase。 与 其 他 编程 语言 不 同 的 是 ，JavaScript 并 没有 一 个 标准 来 统 
一 其 语法 或 特性 , 而 这 3 种 不 同 的 版 本 恰恰 突出 了 这 个 问题 。 后 来 由 来 自 Netscape、Sun、 微软 、Borland 
和 其 他 一 些 对 脚本 编程 感 兴趣 的 公司 的 程序 员 组 成 了 TC39 委员 会 ， 该 委员 会 被 委派 来 标准 化 一 个 通 
用 、 跨 平台 、 中 立 于 厂商 的 脚本 语言 的 语法 和 语义 。TC39 委员 会 制定 了 “ECMAScript 程序 语言 的 规 
范 书 ”( 又 称 为 “ECMA-262 标准 ”)， 该 标准 通过 国际 标准 化 组 织 (ISO) 采纳 通过 ， 作 为 各 种 浏览 器 
生产 开发 所 使 用 的 脚本 程序 的 统一 标准 。 


2. JavaScript 的 主要 特点 


JavaScript 脚本 语言 的 主要 特点 如 下 。 

回 ”解释 性 。 

JavaScript 不 同 于 一 些 编译 性 的 程序 语言 ， 如 C、C++ 等 ， 它 是 一 种 解释 性 的 程序 语言 ， 它 的 源 代 
码 不 需要 经 过 编译 ， 就 可 以 直接 在 浏览 器 中 运行 时 被 解释 。 

回 ”基于 对 象 。 

JavaScript 是 一 种 基于 对 象 的 语言 。 这 意味 着 它 能 运用 自己 已 经 创建 的 对 象 。 因 此 ， 许 多 功能 可 以 
来 自 于 脚本 环境 中 对 象 的 方法 与 脚本 的 相互 作用 。 

事件 驱动 。 

JavaScript 可 以 直接 对 用 户 或 客户 输入 做 出 响应 , 无 须 经 过 Web 服务 程序 。 它 对 用 户 的 响应 ， 是 以 
事件 驱动 的 方式 进行 的 。 所 谓 事件 驱动 ， 就 是 指 在 主页 中 执行 了 某 种 操作 所 产生 的 动作 ， 此 动作 称 为 
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“事件 ”。 比 如 按 下 鼠标 、 移 动 窗口 、 选 择 菜单 等 都 可 以 视 为 事件 。 当 事件 发 生 后 ， 可 能 会 引起 相应 的 
事件 响应 。 

JavaScript 依赖 于 浏览 器 本 身 ， 与 操作 环境 无 关 ， 只 要 能 运行 浏览 器 的 计算 机 ， 并 支持 JavaScript 
的 浏览 器 就 可 以 执行 。 

回 ”安全 性 。 

JavaScript 是 一 种 安全 性 语言 ， 它 不 允许 访问 本 地 的 硬盘 ， 并 不 能 将 数据 存 入 服务 器 上 ， 不 允许 对 
网 络 文档 进行 修改 和 删除 ， 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ， 这 样 可 有 效 地 防止 数据 的 丢失 。 


3. JavaScript 的 常见 应 用 


使 用 JavaScript 脚本 实现 的 动态 页 面 在 Web 上 随处 可 见 。 下 面 将 介绍 几 种 JavaScript 常见 的 应 用 。 

回 ”验证 用 户 输入 的 内 容 。 

使 用 JavaScript 脚本 语言 可 以 在 客户 端 对 用 户 输入 的 数据 进行 验证 。 例如, 在 制作 用 户 登录 信息 页 
面 时 ， 要 求 用 户 输入 账户 和 密码 以 确定 用 户 输入 是 否 准确 。 如 果 用 户 输入 的 密码 信息 不 正确 ， 将 会 输 
出 “密码 输入 错误 !” 的 提示 信息 ， 如 图 11.1 所 示 。 

回 “动画 效果 。 

在 浏览 网 页 时 ， 经 常会 看 到 一 些 动画 效果 ， 使 页 面 显得 更 加 生动 。 使 用 JavaScript 脚本 语言 也 可 以 
实现 动画 效果 ， 例 如 ， 在 页 面 中 实现 商品 图 片 轮 播 的 效果 ， 如 图 11.2 所 示 。 


AN 2016.2.29~2016.3.8 
图 片 轮 播 动画 效果 


图 11.1 验证 密码 是 否 正确 图 11.2 商品 图 片 轮 播 效果 


明日 科技 | 南城 首页 | 支付 宝 | 物流 


11.1.2” ”JavaScript 在 HTML 中 的 使 用 


通常 情况 下 ， 在 Web 页 面 中 使 用 JavaScript 有 以 下 两 种 方法 : 一 种 是 在 页 面 中 直接 嵌入 JavaScript 
代码 ;， 另 一 种 是 链接 外 部 JavaScript 文件 。 下 面 分 别 对 这 两 种 方法 进行 介绍 。 
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7 

说 明 

: 编辑 JavaScript 程序 可 以 使 用 任何 一 种 文本 编辑 器 ， 如 Windows 中 的 记事 本 、 写 字 板 等 应 用 软 

; 件 。 由 于 JavaScript 程序 可 以 谈 入 HTML 文件 中 ， 因 此 ， 读 者 可 以 使 用 任何 一 种 编辑 HTML 文件 
的 工具 软件 ， 如 Dreamweaver 和 WebStorm 等 。 


1. 在 页 面 中 直接 嵌入 JavaScript 代码 

在 HTML 文档 中 可 以 使 用 <scripf>.….</scripf> 标 签 将 JavaScript 脚本 嵌入 其 中 。 在 HTML 文档 中 可 
以 使 用 多 个 <scrip 亿 标签 , 每 个 <scrip 亿 标签 中 可 以 包含 多 个 JavaScript 的 代码 集合 。<scrip 亿 标签 常用 的 
属性 及 说 明 如 表 11.1 所 示 。 


表 11.1 <script> 标 签 常用 的 属性 及 说 明 


11.3 在 HIML 中 直接 嵌入 JavaScript 代码 


人 注意 
<script> 标 签 可 以 放 在 Web 页 面 的 <head> 和 </head> 标 签 中 ,也 可 以 放 在 <body> 和 </body> 标 签 中 。 
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2. 链接 外 部 JavaScript 文件 


在 Web 页 面 中 引入 JavaScript 的 另 一 种 方法 是 采用 链接 外 部 JavaScript 文件 的 形式 。 如 果 脚 本 代码 
比较 复杂 或 是 同一 段 代码 可 以 被 多 个 页 面 所 使 用 , 则 可 以 将 这 些 脚本 代码 放置 在 一 个 单独 的 文件 中 ( 保 
存 文件 的 扩展 名 为 js), 然后 在 需要 使 用 该 代码 的 Web 页 面 中 链接 该 JavaScript 文件 即 可 。 在 Web 页 面 
中 链接 外 部 JavaScript 文件 的 语法 格式 如 下 。 


01 


<script language="javascript" src="your-Javascript.js"></script> 


在 HTML 页 面 中 链接 外 部 JavaScript 代码 ， 如 图 11.4 所 示 。 


Dw xmn sat) BEV) BAD mam ERIO S30 EA BAW) met) 
drchaml x Ey 


ENEETE i 


总 辣 硅 叶 可 | 三 局 


ETT 2 


11.4 调用 外 部 JavaScript 文件 


例 11.01 使 用 JavaScript 在 网 页 中 输出 字符 串 , 一 般 通过 document 对 象 的 innerHTML 属性 实现 。 
首先 在 <button> 标 签 上 添加 onclick 属性 ， 属 性 值 是 displayDate0， 表 示 调 用 JavaScript 的 displayDateO 
方法 ， 然 后 通过 <script> 标 签 编写 displayDate() 方 法 的 县 体 罗 辑 代码 ， 有 具体 代码 如 下 。( 实例 位 置 : 资源 


包 \ 源 码 \11\11.01 ) 
01 <!IDOCTYPE html> 
02 <html> 
03 <head> 
04 <meta charset="utf-8"> 
05 <title> 第 一 个 JavaScript 小 程序 </title> 
06 <script> 
07 // 创 建 方法 ， 用 于 获取 当前 系统 时 间 并 显示 到 页 面 中 
08 function displayDate(){ 
09 


document.getElementByld("demo").innerHTML=Date(); /获取 id 为 demo 的 <p> 标 签 
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10 
3 </script> 
12 </head> 


13 <body style="width: 500px;margin:0 auto;border: 1px solid red;text-align: center"> 
14 ”<h1> 第 一 个 JavaScript 小 程序 </h1> 

15 ”<p id="demo"> 这 里 显示 日 期 </p> 

16 ”<!-onclick 属性 表示 鼠标 单 击 按钮 ， 触 发 displayDate() 方 法 -> 

17 ”<button type="button" onclick="displayDate()"> 显 示 当 前 日 期 </button> 

18 </body> 

19 </html> 


运行 效果 如 图 11.5 所 示 。 


S| 
[Ee 


CC | © iocalhost63342/0LUindexhtml 女 


第 一 个 Javascript 小 程序 


这 里 显示 日 期 


时 示 当前 日 期 


图 11.5 使 用 JavaScript 输出 当前 时 间 


11.2 ” JavaScript 语言 基础 


名 等。 其中， 流程 控制 语句 在 实际 开发 中 经 常会 用 到 ， 需 要 认真 学 习 并 做 到 灵活 运用 。 
11.2.1 数据 类 型 


每 一 种 计算 机 语言 都 有 自己 所 支持 的 数据 类 型 。 在 JavaScript 脚本 语言 中 采用 的 是 弱 类 型 的 方式 ， 
即 一 个 数据 (变量 或 常量 ) 不 必 先 声明 ， 可 在 使 用 或 赋值 时 再 确定 其 数据 的 类 型 。 当 然 也 可 以 先 声 
明 该 数据 的 类 型 ， 即 通过 在 赋值 时 自动 说 明 其 数据 类 型 。 数 据 类 型 主要 包括 以 下 3 种 ， 下 面 分 别 具 体 
介绍 。 

1. 数值 型 数据 


数值 型 数据 (number) 是 最 基本 的 数据 类 型 。 在 JavaScript 中 ， 和 其 他 程序 设计 语言 (如 C 和 Java) 
的 不 同 之 处 在 于 ， 它 并 不 区 别 整 型 数值 和 浮 点 型 数值 。 在 JavaScript 中 ， 所 有 的 数值 都 是 由 浮 点 型 表 
示 的 。JavaScript 采用 IEEE754 标准 定义 的 64 位 浮 点 格式 表示 数字 ， 这 意味 着 它 能 表示 的 最 大 值 是 
十 1.7976931348623157X103， 最 小 值 是 士 5X 10324。 
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a, 
NO 涪 明 
任何 数值 直接 量 前 加 负 号 (- ) 可 以 构成 它 的 负数 。 但 是 负 号 是 一 元 求 反 运 算 符 ， 它 不 是 数值 
直接 量 语法 的 一 部 分 。 
例如 ， 下 面 列举 的 几 个 数据 都 是 数值 型 数据 。 
01 0 // 整 数 
2°7 /整数 
03 -8 /整数 
04 Oxff 1/ 十 六 进 制 
Se // 浮 点 型 数据 
2. 字符 串 型 数据 
字符 串 (string〉 是 由 Unicode 字符 、 数 字 、 标 点 符号 等 组 成 的 序列 。 字 符 串 型 数据 是 JavaScript 
用 来 表示 文本 的 数据 类 型 。 程 序 中 的 字符 串 型 数据 是 包含 在 单 引号 或 双 引 号 中 的 ， 由 单 引 号 定 界 的 字 
符 串 中 可 以 含有 双 引 号 ， 由 双 引 号 定 界 的 字符 串 中 也 可 以 含有 单 引 号 。 下 面 举例 进行 说 明 。 
(1) 单 引号 括 起 来 的 一 个 或 多 个 字符 ， 例 如 : 
01 啊 ' 
02 “' 活 着 的 人 却 拥 有 着 一 颗 沉 睡 的 心 ' 
(2) 双 引 号 括 起 来 的 一 个 或 多 个 字符 ， 例 如 
01  " 呀 " 
02 "我 想 学 习 JavaScript" 
(3) 单 引号 定 界 的 字符 串 中 可 以 含有 双 引 号 ， 例 如 : 
01 ‘name="myname" 
(4) 双 引 号 定 界 的 字符 串 中 可 以 含有 单 引 号 ， 例 如 : 


01 "Youcan call me Tom'™" 


3. 特殊 数据 类 型 

以 反 斜 枉 “\” 开 头 的 不 可 显示 的 特殊 字符 通常 称 为 控制 字符 ， 也 被 称 为 转 义 字符 。 通 过 转 义 字符 
可 以 在 字符 串 中 添加 不 可 显示 的 特殊 字符 ， 或 者 防止 引号 匹配 混乱 的 问题 。JavaScript 常用 的 转 义 字符 
如 表 11.2 所 示 。 


表 11.2 JavaScript 常用 的 转 义 字符 


转 义 字符 描述 
出 跳 格 〈Tab， 水 平 ) 
un 换行 
Vt 反 斜 杠 
¥ 单 引号 
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在 “documentwriteln0;” 语 句 中 使 用 转 义 字符 时 ， 只 有 将 其 放 在 格式 化 文本 块 中 才 会 起 作用 ， 所 
以 脚本 必须 在 <pre> 和 </pre> 的 标签 内 。 

例如 ， 下 面 是 应 用 转 义 字符 使 字符 串 换行 ， 代 码 如 下 。 

01 document.writeln("<pre>"); 


02 ”document.writeln(" 轻 松 学 习 \nJavaScript 语言 ! "); 
03 document.writeln("</pre>"); 


运行 结果 : 

01 ”轻松 学 习 

02 ” ”JavaScript 语言 ! 

如 果 上 述 代码 不 使 用 <pre> 和 </pre> 的 标签 ， 则 转 义 字符 不 起 作用 ， 代 码 如 下 。 
01 ”document.writeln(" 快 快乐 乐 \n 平平 安安 ! "); 


01 ，” 快 快乐 乐平 平安 安 ! 


例 11.02 ”本 实例 使 用 HTML 语法 , 在 页 面 中 输出 JavaScript 语言 的 常用 数据 类 型 。 首 先 创建 一 个 
HTML 页 面 ， 引 入 mr-style.css 文件 ， 搭 建 页 面 的 布局 和 样式 。 然 后 分 别 编写 Number 类 型 、String 类 
型 区 域 的 代码 ， 关 键 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \11\11.02 ) 


01 <!IDOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8" /> 

05 <title>JavaScript 数据 类 型 </title> 
06 <!- 引 入 页 面 样式 文件 --> 


07 <link rel="stylesheet" type="text/css" href="css/mr-style.css"> 
08 </head> 

09 <body> 

10 <div> 

gl <section> 

12 <h2><span> 常 用 数据 类 型 </span></h2> 

13 

14 <div class="mr-box"> 

15 <span class="mr-item">Number 类 型 </span> 
16 <span class="mr-info-first"> 

二 <xmp> 

18 var a = 10; 1/ 十进制 (整数 ) 
19 varb= 1.1; // 浮 点 数 

20 var c = 0x12ac; /十 六 进 制 

21 vard= 5.0; /解析 成 整数 5 
22 console.log(c); /打印 值 : 4780 
23 console.log(d); /打印 值 : 5 

24 </xmp> 

2 </span> 
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</div> 
<div class="mr-box"> 
<span class="mr-item">String 类 型 </span> 
<span class="mr-info"> 
<xmp> 
var string1 = "51 购 商 城 ”” ”// 双 引号 
var string2 = '51 购 商 城 '; /| 单 引号 
var string3 = "5 八 购 \"; /| 转 义 
console.log(string3); 751' 购 ' 


SEB88IHHRS NH LSBBND 


[ 


行 效果 如 图 11.6 所 示 。 


Number 类 型 String 类 型 


进 制 喜 吉 ) 


Boolean 类 型 


ello world!” E // 声明 后 未 初始 化 


// undefined 
该 语句 已 执 行 打印 ! 人 
//mull 数据 类 型 
// mull 


图 11.6 JavaScript 常用 数据 类 型 


11.2.2 ”运算 符 与 表达 式 


运算 符 是 完成 一 系列 操作 的 符号 ，JavaScript 的 运算 符 按 操作 数 可 以 分 为 单 目 运算 符 、 双 目 运算 符 
和 多 目 运算 符 这 3 种 ， 按 运算 符 类 型 可 以 分 为 算术 运算 符 、 比 较 运算 符 、 赋 值 运算 符 、 罗 辑 运算 符 和 
条 件 运 算 符 这 5 种 。 下 面 将 分 别 介 绍 。 


里 
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1. 算术 运算 符 


算术 运算 符 用 于 在 程序 中 进行 加 、 减 、 乘 、 除 等 运算 。 在 JavaScript 中 常用 的 算术 运算 符 如 表 11.3 
所 示 。 


表 11.3 ” JavaScript 中 的 算术 运算 符 


运 算 符 描述 示例 
+ 加 运算 符 4+6， 返 回 值 为 10 
双 减 运算 符 7-2， 返 回 值 为 5 
乘 运算 符 7*3， 返 回 值 为 21 
/ 除 运算 符 12/3， 返 回 值 为 4 
% 求 模 运算 符 7%4， 返 回 值 为 3 
自 增 运算 符 。 该 运算 符 有 两 种 情况 : i++ (在 使 用 i 之 后 ，| =1; j=i++; 食 的 值 为 1，i 的 值 为 2 
使 i 的 值 加 1，〉; ++i (在 使 用 i 之 前 ， 先 使 的 值 加 1) | i=1; j=++i; _ 作 的 值 为 2，i 的 值 为 2 
自 减 运算 符 。 该 运算 符 有 两 种 情况 : i 一 (在 使 用 i 之 后 ，| 二 6: j=i 一 ”省 的 值 为 6，i 的 值 为 5 
到 使 i 的 值 减 1) ， 一 i (在 使 用 i 之 前 ， 先 使 i 的 值 减 1) | i=6:; =i /的 值 为 5，i 的 值 为 5 
2. 比较 运算 符 


比较 运算 符 的 基本 操作 过 程 是 : 先 对 操作 数 进 行 比 较 ， 这 个 操作 数 可 以 是 数字 也 可 以 是 字符 串 ， 
然后 再 返回 一 个 布尔 值 true 或 false。 


3. 赋值 运算 符 


JavaScript 中 的 赋值 运算 可 以 分 为 简单 赋值 运算 和 复合 赋值 运算 。 简 单 赋值 运算 是 将 赋值 运算 符 
(=) 右边 表达 式 的 值 保存 到 左边 的 变量 中 ; 而 复合 赋值 运算 混合 了 其 他 操作 (算术 运算 操作 、 位 操作 
等 ) 和 赋值 操作 。 例 如 : 


01 sum+=i; /| 等 同 于 sum=sumt+i; 


4. 字符 串 运算 符 


字符 串 运算 符 是 用 于 两 个 字符 型 数据 之 间 的 运算 符 ， 除 了 比较 运算 符 外 ， 还 可 以 是 “+” 和 “+=” 
运算 符 。 其 中 ,“+” 运 算 符 用 于 连接 两 个 字符 串 ， 而 “+= ”运算 符 则 用 于 连接 两 个 字符 串 ， 并 将 结果 
赋 给 第 一 个 字符 串 。 


5. 条 件 运算 符 
条 件 运 算 符 是 JavaScript 支持 的 一 种 特殊 的 三 目 运算 符 ， 其 语法 格式 如 下 。 
01 ”操作 数 ? 结 果 1: 结 果 2 


在 上 面 的 语法 中 ， 如 果 “ 操 作 数 ”的 值 为 tue， 则 整个 表达 式 的 结果 为 “结果 1”;， 否则 为 “结果 2”。 
例如 ， 定 义 两 个 变量 ,， 值 都 为 10， 然 后 判断 两 个 变量 是 否 相等 。 如 果 相 等 ， 则 返回 “正确 ” 否则 
返回 “错误 ” 代码 如 下 。 
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<script language="javascript"> 


var a=10; 
var b=10; 


alert(a==b)? 正 确 :错误 ; 


</script> 


例 11.03 ”本 实例 使 用 JavaScript 制作 一 个 简单 的 计算 器 。 首 先 创建 一 个 HIML 页 面 ， 引 入 
mr-style.css 文件 , 搭建 页 面 的 布局 和 样式 。 主要 使 用 <ul> 标 签 和 <li> 标 签 , 布局 计算 器 的 各 个 按钮 位 置 ， 
然后 通过 <script>.….</script> 标 签 ， 直 接 编写 JavaScript 逻辑 代码 ， 控 制 计算 器 各 个 按钮 的 动作 。 关 键 代 
码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \11\11.03 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
| 
12 
13 
14 
15 
16 
条: 
18 
19 
20 
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<IDOCTYPE HTML> 


<html> 
<head> 


<meta charset="utf-8" /> 

<title>JavaScript 实现 的 简单 计算 器 </title> 

<!- 引 入 页 面 样式 文件 -> 

<link rel="stylesheet" type="text/css" href="css/mr-style.css"> 


<script language="javascript"> 
var num=0; 
var result=0; 
var numshow="0"; 
var operate=0; 
var calcul=0; 
var quit=0; 
// 复 原 为 0 
function command(num)}{ 


} 


var str=String(document.calculator.numScreen.value); 
str=(str!="0") ? ((operate==0) ? str : ™): "™; 

str=str + String(num); 
document.calculator.numScreen.value=str; 
operate=0; 

quit=0; 


// 验 证 是 否 有 小 数 点 
function dot(){ 


var str=String(document.calculator.numScreen.value); 
str=(strl="0") ? ((operate==0) ? str : "0") : "0"; 
for(i=0; i<=str.length;i++){ 

if(str.substr(i,1)==".") return false; 


开 

Str=str + ". 
document.calculator.numScreen.value=str; 
operate=0; 


} 
// 此 处 省 略 部 分 代码 
</script> 


// 判 断 输 入 状态 的 标志 
// 判 断 计算 状态 的 标志 
// 防 止 重复 按键 的 标志 


// 获 得 当前 显示 数据 

1/ 车 当前 值 不 是 0， 则 返回 当前 值 
// 给 当前 值 追加 字符 

/刷新 显示 

// 重 置 输入 状态 

// 重 置 防止 重复 按键 的 标志 


// 车 当前 值 不 是 0， 则 返回 当前 值 
1/ 判断 是 否 已 经 有 一 个 点 号 
// 如 果 有 ， 则 不 再 插入 


39 
40 
41 
42 
43 
44 
45 
46 


74 
75 
76 
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</head> 
<body> 
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<div id="mr-calculator > 
<div id="calcu-head"><h6> 简 单 的 计算 器 </h6></div> 
<form name="calculator" action="" method="get"> 


<divi 


calcu-screen"> 


<!- 显 示 窗口 ， 避 免 键盘 输入 一 > 


<input type="text" name="numScreen" class="screen" value="0" 


onfocus="this.blur();" /> 


</div> 
<div> 
<ul> <!-- 显 5 


<li onclick: 
<li onclick="command(8)">8</li> 

<li onclick="command(9)">9</li> 

<li class="tool" onclick="del()">¢-</li> 

<li class="tool" onclick="clearscreen()">C</li> 
<li onclick="command(4)">4</li> 

<li onclick="command(5)">5</li> 

<li onclick="command(6)">6</li> 

<li class="tool" onclick="times()"> Xx </li> 

<li class="tool" onclick="divide()"> 二 < 中 > 

<li onclick="command(1)">1</li> 

<li onclick="command(2)">2</li> 

<li onclick="command(3)">3</li> 

<li class="tool" onclick="plus()">+</li> 

<li class="tool" onclick="minus()">-</li> 

<li onclick="command(0)">0</li> 

<li onclick="dzero()">00</li> 

<li onclick="dot()">.</li> 

<li class="tool" onclick: 
<li class="tool" onclick: 


"persent()">%</li> 
"equal()">=</li> 


</ul> 


</div> 


</form> 
</div> 


</body> 
</html> 


行 效果 如 图 11.7 所 示 。 


简单 的 计算 器 


图 11.7 简单 计算 器 的 页 面 


189 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


11.2.3 ”流程 控制 


语句 是 对 计算 机 下 达 的 命令 ， 每 一 个 程序 都 是 由 很 多 个 语句 组 合 起 来 的 ， 也 就 是 说 ， 语 句 是 组 成 
程序 的 基本 单元 , 同时 它 也 控制 着 整个 程序 的 执行 流程 。 本 节 将 对 JavaScript 中 的 流程 控制 语句 及 其 使 
用 方法 进行 讲解 。 

1. If 语 句 

让 条 件 判断 语句 是 最 基本 、 最 常用 的 流程 控制 语句 ， 可 以 根据 条 件 表达 式 的 值 执 行 相应 的 处 理 。f 
语句 的 语法 格式 如 下 。 


01 if(expressionX{ 


02 statement 1 
03 Jelse{ 

04 statement 2 
05 } 


回 expression: 必 选 项 。 用 于 指定 条 件 表 达 式 ， 可 以 使 用 逻辑 运算 符 。 

回 statement 1: 用 于 指定 要 执行 的 语句 序列 。 当 expression 的 值 为 tue 时 ， 执 行 该 语句 序列 。 
回 statement 2: 用 于 指定 要 执行 的 语句 序列 。 当 expression 的 值 为 false 时 ， 执 行 该 语句 序列 。 
站 .else 条 件 判 断 语句 的 执行 流程 如 图 11.8 所 示 。 


图 11.8 让 ..else 条 件 判断 语句 的 执行 流程 


/ 
6 说明 
上 述 这 语句 是 典型 的 二 路 分 支 结构 。 其 中 else 部 分 可 以 省 略 ， 而 且 statementl 为 单一 语句 时 ， 
其 两 边 的 大 括号 也 可 以 省 略 。 


2. while 语句 

与 for 语句 一 样 ，while 语句 也 可 以 实现 循环 操纵 。while 循环 语句 也 称 为 前 测试 循环 语句 ， 它 是 利 
用 一 个 条 件 来 控制 是 否 要 继续 重复 执行 这 个 语句 。while 循环 语句 与 for 循环 语句 相 比 ， 无 论 是 语法 还 
是 执行 的 流程 ， 都 较为 简明 易 懂 。 
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语法 如 下 。 


While(expression)j{ 
statement 
h 


expression: 一 个 包含 比较 运算 符 的 条 件 表达 式 ， 用 来 指定 循环 条 件 。 
statement: 用 来 指定 循环 体 ， 在 循环 条 件 的 结果 为 true 时 ， 重 复 执行 。 


while 循环 语句 的 执行 流程 如 图 11.9 所 示 。 


expression (条 件 表 达 式 ) 
Cm 


11.9 while 循环 语句 的 执行 流程 


4 
NC 说明 
在 使 用 while 循环 语句 时 ， 也 一 定 要 保证 循环 可 以 正常 结束 ， 即 必须 保证 条 件 表 达 式 的 值 存在 
为 true 的 情况 ， 否 则 将 形成 死 循环 。 


例 11.04 实现 51 购 商 城 登录 界面 ， 用 户 登 录 时 ， 如 果 账 户 和 密码 输入 正确 ， 则 登录 成 功 ， 否 则 
登录 失败 ， 使 用 JavaScript 条 件 控制 语句 实现 此 功能 。 首 先 创建 一 个 HTML 页 面 ， 引 入 mr-basic.css 和 
mr-login.css 文件 ， 搭 建 页 面 的 布局 和 样式 。 主 要 使 用 <form> 标 签 ， 显 示 用 户 的 账号 和 密码 ， 关 键 代 码 
如 下 。( 实例 位 置 : 资源 包 \ 源 码 \11\11.04 ) 


01 
02 
03 
04 
05 


<IDOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title> 实 现 51 购 商城 的 登录 验证 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<link rel="stylesheet" href="css/mr-basic.css"/> 
<link href="css/mr-login.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div class="login-banner"> 
<div class="login-main"> 
<div class="login-box" style="right:30%"> 
<h3 class="title"> 实 现 51 购 商 城 的 登录 验证 </h3> 
<div class="clear"></div> 
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17 <div class="login-form"> 

18 < 上 -用 户 账 户 和 密码 的 表单 -> 

19 <form> 

20 <div class="user-name"> 

这 了 <label for="user"><i class="mr-icon-user"></i></label> 

22 <input type="text" name="user" id="user" placeholder=" 邮 箱 /手机 /用 户 名 "> 

23 </div> 

24 <div class="user-pass"> 

25 <label for="password"><i class="mr-icon-lock"></i></label> 

26 <input type="password" name="password" id="password" placeholder=" 
请 输入 密码 "> 

27 </div> 

28 </form> 

29 </div> 

30 <div class="login-links"> 

31 <label for="remember-me"><input id="remember-me" type="checkbox"> 记 住 密码 

</label> 

32 <a href="register.html" class="mr-fr"> 注 册 </a> 

33 <br/> 

34 </div> 

35 <script> 

36 function login(){ 

37 var user=document.getElementByld("user"); 1/ 获取 账户 信息 

38 var password=document.getElementByld("password");”// 获 取 密 码 信息 

39 if(user.valuel=='mr && password.valuel=='mrsoft }{ 

40 alert( 您 输入 的 账户 或 密码 错误 ! 小 

41 Jelse{ 

42 alert(' 登 录 成 功 ! '); 

43 

EE 由 

45 </script> 

46 </body> 

47 </html> 


运行 效果 如 图 11.10 所 示 。 


要 coss 人 wiss OW mas 


图 11.10 条 件 控制 用 户 的 登录 


JavaScript 是 3 


解 ， 包 括 Window 
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11.3 JavaScript 对 象 编程 


基于 对 象 (objectrbased) 的 语言 ， 本 节 将 对 JavaScript 中 常见 的 几 种 对 象 进行 详细 讲 
窗口 对 象 、Document 文档 对 象 等 。Window 窗口 对 象 代表 的 是 打开 的 浏览 器 窗口 ， 


通过 Window 对 象 可 以 控制 窗口 的 大 小 和 位 置 。Document 文档 对 象 代表 的 是 浏览 器 窗口 中 的 文档 ， 该 


对 象 是 Window 对 


象 的 子 对 象 。 


11.3.1 Window 窗口 对 象 


1. Window 对 象 的 属性 


顶层 Window 


对 象 是 所 有 其 他 子 对 象 的 父 对象 , 它 出 现在 每 一 个 页 面 上 , 并 且 可 以 在 单个 JavaScript 


应 用 程序 中 被 多 次 使 用 。 
表 11.4 ”<script> 标 签 常用 的 属性 及 说 明 
属 性 描述 
document 对 话 框 中 显示 的 当前 文档 
frames 表示 当前 对 话 框 中 所 有 frame 对 象 的 集合 
location 指定 当前 文档 的 URL 
name 对 话 框 的 名 字 


2. Window 对 象 的 使 用 


Window 对 象 


可 以 直接 调用 其 方法 和 属性 ， 语 法 如 下 。 


01 ”window. 属 性 名 

02 ”window 方 法 名 (参数 列表 ) 

Window 是 不 需要 使 用 new 运算 符 来 创建 的 对 象 。 因 此 ， 在 使 用 Window 对 象 时 ， 只 要 直接 使 用 
"window" 来 引用 Window 对 象 即 可 ， 语 法 如 下 。 

01 ”window.alert(" 字 符 串 "); 

02 ”window.document.write(" 字 符 串 "); 

在 实际 运用 中 ，JavaSctipt 允许 使 用 一 个 字符 串 来 给 窗口 命名 ， 也 可 以 使 用 一 些 关键 字 来 代替 某 些 
特定 的 窗口 。 例 如 ， 使 用 "self" 代 表 当 前 窗口 、"parent" 代 表 父 级 窗口 等 。 对 于 这 种 情况 ， 可 以 用 这 些 字 
符 串 来 代表 "window"， 语 法 如 下 。 

01 ”parent. 属 性 名 


02 parent. 方 


法 名 (参数 列表 ) 
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3. 警告 (Alert) 

在 页 面 显示 时 弹出 警告 对 话 框 主要 是 在 <body> 标 签 中 调用 Window 对 象 的 alert0 方 法 实现 的 , 下 面 
对 该 方法 进行 详细 说 明 。 

利用 Window 对 象 的 alert0 方 法 可 以 弹出 一 个 警告 框 ， 并 且 在 警告 框 内 可 以 显示 提示 字符 串 文本 。 

语法 如 下 。 

01 window.alert(str) 


在 上 面 的 语法 中 ,参数 str 表示 要 在 警告 对 话 框 中 显示 的 提示 字符 串 。 用 户 可 以 单 击 警告 对 话 框 中 
的 “确定 ”按钮 来 关闭 该 警告 对 话 框 。 不 同 浏览 器 的 警告 对 话 框 样式 可 能 会 有 些 不 同 。 


a 
NC 说明 
警告 对 话 框 是 由 当前 运行 的 页 面 弹出 的 ， 在 对 该 对 话 框 进行 处 理 之 前 ， 不 能 对 当前 页 面 进 行 操 
作 ， 并 且 其 后 面 的 代码 也 不 会 被 执行 。 只 有 将 警告 对 话 框 进行 处 理 后 ( 如 单 击 “确定 ”按钮 或 者 关 
闭 对 话 框 ) ， 才 可 以 对 当前 页 面 进行 操作 ， 后 面 的 代码 才能 继续 执行 。 


例 11.05 本 实例 中 使 用 HTML 语 法 ,在 页 面 中 显示 Window 对 象 常用 对 话 框 .首先 创建 一 个 HTML 
页 面 , 引入 mr-style.css 文件 , 搭建 页 面 的 布局 和 样式 。 然后 编写 alert 对 话 框 的 展示 代码 , 用 户 单 击 “ 试 
-下 ”按钮 ， 弹 出 alert 对 话 框 的 内 容 ， 关 键 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \11\11.05 ) 


01 <!IDOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8" /> 

05 <title>Window 对 象 常用 对 话 框 </title> 
06 <!-- 引 入 页 面 样式 文件 --> 


07 <link rel="stylesheet" type="text/css" href="css/mr-style.css"> 
08 </head> 

09 <body> 

10 <div> 

11 <section> 

<h2><span>Window 对 象 常用 对 话 框 </span></h2> 

13 <div class="mr-box"> 

14 <span class="mr-item"> 警 告 (alert) </span> 

15 <span class="mr-info-first"> 

16 <button type="button" onclick="mr_alert()"> 试 一 下 !</button> 
17 </span> 

18 </div> 

19 < 上 -此 处 省 略 部 分 代码 --> 

20 <script> 

| /警告 

区 已 function mr_alert(){ 

23 window .alert(" 警 告 : 支付 成 功 !"); 

24 


} 
25 /| 是否 确定 
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function mr_confirm(X 
window.confirm(" 询 问 : 确定 要 购买 吗 ? "); 


} 

/提示 留言 

function mr_prompts(X{ 
人 


} 

/| 综合 对 话 框 

function mr_. 
‘Window. Sh 确定 要 购买 吗 ? "); 
window.prompt(" 请 输入 你 的 邮寄 地 址 ",") 
window .alert(" 支 付 成 功 ! ") 


SS8S88RSRSSSSNSS 


</html> 
运行 效果 如 图 11.11 所 示 。 


警告 ( alert ) 确定 ( comfirm ) 


| x | 


提示 ( prompts ) 综合 对 话 杠 


| | 


图 11.11 活用 文字 装饰 的 页 面 效 果 
11.3.2”Document 文 档 对 象 


文档 对 象 (Document) 代表 浏览 器 窗口 中 的 文档 ， 该 对 象 是 Window 对 象 的 子 对 象 ， 由 于 Window 
对 象 是 DOM 对 象 模型 中 的 默认 对 象 ,因此 Window 对 象 中 的 方法 和 子 对 象 不 需要 使 用 Window 来 引用 。 
通过 Document 对 象 可 以 访问 HTML 文档 中 包含 的 任何 HIML 标记 并 可 以 动态 地 改变 HTML 标记 中 的 
内 容 ， 如 表单 、 图 像 、 表 格 和 超 链 接 等 。 该 对 象 在 JavaScript 1.0 版 本 中 就 已 经 存在 ， 在 随后 的 版 本 中 
又 增加 了 几 个 属性 和 方法 。Document 对 象 层次 结构 如 图 11.12 所 示 。 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


Docunent 
anchor | [applet] [inase] [iom| [eoorie 
select | | | submit hidden | [eheckbor | [easswora | | [button 
option [ reset | |itext | [textarea| [resio 


图 11.12 Document 对 象 层次 结构 


链接 文字 颜色 设置 通过 使 用 alinkColor 属性 、linkColor 属性 和 vlinkColor 属性 来 实现 ， 下 面 分 别 
介绍 。 


1. alinkColor 属性 


[color=]Jdocument.alinkcolor[=setColor] 

回 setColor: 设置 颜色 的 名 称 或 颜色 的 RGB 值 。setColor 是 可 选项 。 
回 color: 字符 串 变 量 ， 用 来 获取 颜色 值 。color 是 可 选项 。 

2. linkColor 属性 

linkColor 属性 用 来 获取 或 设置 页 面 中 未 单 击 的 链接 的 颜色 ， 语 法 如 下 。 
[color=]Jdocument.linkColor[=setColor] 


回 setColor: 设置 颜色 的 名 称 或 颜色 的 RGB 值 。setColor 是 可 选项 。 
回 color: 字符 串 变量 ， 用 来 获取 颜色 值 。color 是 可 选项 。 


3. vlinkColor 属性 
VlinkColor 属性 用 来 获取 或 设置 页 面 中 单 击 过 的 链接 的 颜色 ， 语 法 如 下 。 
[color=]Jdocument.vlinkColor[=setColor] 


回 setColor: 设置 颜色 的 名 称 或 颜色 的 RGB 值 。setColor 是 可 选项 。 

回 color: 字符 串 变 量 ， 用 来 获取 颜色 值 。color 是 可 选项 。 

例 11.06 本 实例 在 页 面 上 使 用 HTML 语法 ， 讲 解 Document 文档 对 象 。 首 先 创建 一 个 HTML 页 
面 ， 引 入 mr-style.css 和 bootstrap.min.css 文件 ， 搭 建 页 面 的 布局 和 样式 。 然 后 编写 Document“ 获 取 文 
档 信 息 ” 的 代码 。 用 户 将 鼠标 移动 到 图 片上 时 ， 会 显示 “ 试 一 下 ”的 按钮 。 单 击 按钮 ， 弹 出 对 应 的 文 
档 信息 ， 如 页 面 标题 和 页 面 URL 等 ， 关 键 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \11\11.06 ) 

01 <!IDOCTYPE html> 

02 <html> 


03 <head> 
04 <meta charset="utf-8"> 
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05 ”<title>Document 文档 对 象 </title> 
06 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
07 <link rel="stylesheet" type="text/css" href="css/mr-style.css"> 


08 </head> 

09 <body> 

10 <div class="zzsc-container"> 

二 <div class="container mt50"> 

12 <h1 style="text-align: center">Document 文档 对 象 </h1> 
7 <div class="row" style="margin-top:50px"> 

14 <div class="col-md-4 col-sm-6"> 

15 <div class="mr-box"> 

16 <img src="img/1.png" alt=""> 

17 <div class="over-layer"> 

18 <h3 class="title"> 获 取 文 档 信 息 </h3> 

19 <p class="description"> 获 取 页 面 标题 : 

20 <button onclick="getTitle();" style="colorblack"> 试 一 下 </button></p> 
21 <p class="description"> 获 取 当 前 域名 : 
22 <button onclick="getDomain();" style="color:black"> 试 一 下 </button></p> 
23 <p class="description"> 获 取 页 面 URL: 
24 <button onclick="getReferrers();" style="color:black"> 试 一 下 </button></p> 
25 </div> 

26 </div> 

27 </div> 

28 <script> 

29 // 获 取 页 面 标题 

30 function getTitle(){ 

31 var originalTitle = document.title; 

32 alert(originalTitle); 

33 六 

34 /获取 当前 域名 

35 function getDomain(){ 

36 var domain = document.domain; 

3 alert(domain); 

38 } 

39 // 获 取 页 面 URL 

40 function getReferrers(){ 

41 var referrer = document.URL; 

42 alert(referrer); 

43 } 

= </script> 

45 </body> 

46 -</html> 


运行 效果 如 图 11.13 所 示 。 
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Document 文 档 对 和 象 


获取 文档 信息 
本 9 


图 11.13 图 解说 明 Document 文档 对 象 


11.4 JavaScript 事件 处 理 


| 视频 讲解 


JavaScript 是 基于 对 象 (object-based) 的 语言 。 它 的 一 个 最 基本 的 特征 就 是 采用 事件 驱动 (event- 
driven)。 它 可 以 使 得 在 图 形 界 面 环 境 下 的 一 切 操作 变 得 简单 化 。 通 常 将 鼠标 或 热 键 的 动作 称 为 事件 
(Event); 由 鼠标 或 热 键 引发 的 一 连 串 程序 动作 ， 称 为 事件 驱动 (Event Driver); 而 对 事件 进行 处 理 的 
程序 或 函数 ， 称 为 事件 处 理 程序 (Event Handler)。 


11.4.1 鼠标 键盘 事件 


鼠标 和 键盘 事件 是 在 页 面 操 作 中 使 用 最 频繁 的 操作 ， 可 以 利用 鼠标 事件 在 页 面 中 实现 鼠标 移动 、 
单 击 时 的 特殊 效果 ， 也 可 以 利用 键盘 事件 来 制作 页 面 的 快捷 键 等 。 

1. 鼠标 的 单 击 事件 

单 击 事件 (onclick) 是 在 鼠标 单 击 时 被 触发 的 事件 。 单 击 是 指 鼠 标 停留 在 对 象 上 ， 按 下 鼠标 键 ， 
在 没有 移动 鼠标 的 同时 放 开 鼠标 键 的 这 一 完整 过 程 。 

单 击 事件 一 般 应 用 于 Button 对 象 、Checkbox 对 象 、Image 对 象 、Link 对 象 、Radio 对 象 、Reset 对 
象 和 Submit 对 象 ，Button 对 象 一 般 只 会 用 到 onclick 事件 处 理 程序 ， 因 为 该 对 象 不 能 从 用 户 那里 得 到 
任何 信息 ， 如 果 没 有 onclick 事件 处 理 程序 ， 按 钮 对 象 将 不 会 有 任何 作用 。 

p94 
NC 说明 

在 使 用 对 象 的 单 击 事件 时 ， 如 果 在 对 象 上 按 下 鼠标 键 ， 然 后 移动 鼠标 到 对 象 外 再 松 开 鼠 标 ， 单 
击 事件 无 效 ， 单 击 事件 必须 在 对 象 上 按 下 松 开 后 ， 才 会 执行 单 击 事件 的 处 理 程序 。 


2. 鼠标 的 按 下 或 松 开 事件 
鼠标 的 按 下 和 松 开 事件 分 别 是 onmousedown 和 onmouseup 事件 。 其 中 ，onmousedown 事件 用 于 在 
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鼠标 按 下 时 触发 事件 处 理 程序 ，onmouseup 事件 是 在 鼠标 松 开 时 触发 事件 处 理 程序 。 在 用 鼠标 单 击 对 
象 时 ， 可 以 用 这 两 个 事件 实现 其 动态 效果 。 


3. 鼠标 的 移入 移出 事件 
鼠标 的 移入 和 移出 事件 分 别 是 onmouseover 和 onmousemove 事件 。 其 中 ，onmouseover 事件 在 鼠 


标 移动 到 对 象 上 方 时 触发 事件 处 理 程序 , onmousemove 事件 在 鼠标 移出 对 象 上 方 时 触发 事件 处 理 程序 。 


可 


[以 用 这 两 个 事件 在 指定 的 对 象 上 移动 鼠标 时 ， 实 现 其 对 象 的 动态 效果 。 
4. 鼠标 的 移动 事件 
鼠标 移动 事件 (onmousemove) 是 鼠标 在 页 面 上 进行 移动 时 触发 事件 处 理 程序 ， 可 以 在 该 事件 中 


用 document 对 象 实时 读 取 鼠 标 在 页 面 中 的 位 置 。 


5. 键盘 事件 的 使 用 


键盘 事件 包含 onkeypress、onkeydown 和 onkeyup 事件 。 
回 onkeypress 事件 : 是 在 键盘 上 的 某 个 键 被 按 下 并 且 释 放 时 触发 此 事件 的 处 理 程序 , 一 般 用 于 键 


盘 上 的 单 键 操作 。 

回 onkeydown 事件 ， 是 在 键盘 上 的 某 个 键 被 按 下 时 触发 此 事件 的 处 理 程序 ， 一 般 用 于 快捷 键 的 
操作 。 

回 onkeyup 事件 : 是 在 键盘 上 的 某 个 键 被 按 下 后 松 开 时 触发 此 事件 的 处 理 程序 , 一 般 用 于 快捷 刍 
的 操作 。 


为 了 便于 读者 对 键盘 上 的 按键 进行 操作 ， 下 面 以 表格 的 形式 给 出 键盘 上 字母 对 应 的 数字 键 的 键 码 


值 ， 如 表 11.5 所 示 。 


表 11.5 字母 与 数字 键 的 键 码 值 


按键 键 值 按键 键 值 
Ala) 65 J 74 
B(b) 66 KG 75 
Ce 67 LO 76 
D(d) 68 M(m 77 
E(e) 69 NO 78 
FOD 70 O(0) 79 
G(g) 71 P(p) 80 
Hu 72 Qq 81 
IO 73 RD 82 


例 11.07 本 实例 通过 新 建 一 个 HTML 页 面 ， 测 试 鼠标 事件 和 键盘 事件 。 首 先 创建 一 个 HIML 页 


面 ， 引 入 mrstyle.css 文件 ， 搭 建 页 面 的 布局 和 样式 。 然 后 在 <body> 标 签 中 ， 添 加 onkeydown 属性 ， 
设 定 值 为 keyEvent0， 表 示 调 用 键盘 事件 ， 关 键 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \1l\11.07 ) 


01 <!IDOCTYPE html> 
02 <html> 
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03 <head> 

04 <meta charset="utf-8" /> 

05 <title> 鼠 标 键盘 事件 </title> 

06 <!- 引 入 页 面 样式 文件 -> 

07 <link rel="stylesheet" type="text/css" href="css/mr-style.css"> 
08 </head> 

09 <body onkeydown='"keyEvent()' style="margin:0 auto;"> 

10 <div class='a'> 


11 <h1 style="text-align: center"> 鼠 标 键盘 事件 </h1> 
12 <div id="mr-event" onmousedown="mouseEvent()"> 
419 <span style="text-align: left"> 试 一 试 : </span><br/><br/> 


14 1. 按 键盘 上 的 Ctrl 键 ， 背 景 颜色 变 成 <span style="color:#151570"> 蓝 色 </span>。<br/><br/> 
15 2 .按键 盘 上 的 Alt 键 ， 背 景 颜色 变 成 <span style="color:darkred"> 红 色 </span>。<br/><br/> 
16 3. 按 键盘 上 的 Shift 键 ， 背 景 颜色 变 成 <span style="color:orangered"> 粉 红色 </span>。 

他 <br/><br/> 

18 4. 单 击 ， 弹 出 提示 信息 。<br/><br/> 

19 5. 右 击 ， 弹 出 提示 信息 。<br/><br/> 


20 </div> 

21 </div> 

22 </body> 

23 <script language="javascript"> 

24 /鼠标 事件 

25 function mouseEvent(){ 

26 var b=event.button; 1/ 获取 鼠标 对 象 
27 if(b==2X{ // 右 击 时 

28 alert(" 你 按 了 右键 ! // 弹 出 提示 信息 
29 } 

30 else if(b==0X{ // 单 击 时 

31 alert(" 你 按 了 左 键 !"); // 弹 出 提示 信息 
32 } 

33 } 

34 // 键 盘 事 件 

35. function keyEvent() { 

36 var c = document.getElementByld('mr-event'); /获取 页 面 对 象 
37 if (event.altKey) { /| 按 Alt 键 时 
38 c.style.backgroundColor = 'red' /| 背景 颜色 变化 
39 } 

40 else if (event.ctriKey) { / 按 Ctrl 键 时 
41 c.style.backgroundColor = 'blue’ /| 背景 颜色 变化 
42 } 

43 else if (event.shiftKey) { /| 按 Shift 键 时 
44 c.style.backgroundColor = 'pink'" // 背 景 颜色 变化 
45 } 

46 } 

47 </script> 

48 </html> 


运行 效果 如 图 11.14 所 示 。 
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鼠标 键盘 事件 
试 - 试 : 
1 按键 条 上 的 Ctr| 键 ， 背 景 颜色 变 成 蓝 色 。 
2 按键 盘 上 的 Alt 键 ， 背 景 颜色 变 成 红色 。 
3 按键 盘 上 的 Shift 键 ， 背 景 颜色 变 成 访 红 舍 。 
4 单 击 , 弹出 提示 信息 。 
5. 右 击 , 弹出 提示 信息 。 


图 11.14 鼠标 键盘 事件 的 测试 页 面 
11.4.2 页面 事 件 


页 面 事件 是 在 页 面 加 载 或 改变 浏览 器 大 小 、 位 置 ， 以 及 对 页 面 中 的 滚动 条 进行 操作 时 ， 所 触发 的 
事件 处 理 程序 。 本 节 将 通过 页 面 事件 对 浏览 器 进行 相应 的 控制 。 


1， 加载 与 卸载 事件 


加 载 事件 onload) 是 在 网 页 加 载 完毕 后 触发 相应 的 事件 处 理 程序 ， 它 可 以 在 网 页 加 载 完成 后 对 网 
页 中 的 表格 样式 、 字 体 、 背 景 颜 色 等 进行 设置 。 卸 载 事件 (unload) 是 在 和 卸载 网 页 时 触发 相应 的 事件 处 
理 程序 ， 卸 载 网 页 是 指 关 闭 当前 页 或 从 当前 页 跳 转 到 其 他 网 页 中 ， 该 事件 常 被 用 于 在 关闭 当前 页 或 跳 
转 其 他 网 页 时 ， 弹 出 询问 提示 框 。 

在 制作 网 页 时 ， 为 了 便于 网 页 资源 的 利用 ， 可 以 在 网 页 加 载 事件 中 对 网 页 中 的 元 素 进行 设置 。 下 
面 以 示例 的 形式 讲解 如 何在 页 面 中 合理 利用 图 片 资 原 。 


2. 页 面 大 小 事件 


页 面 的 大 小 事件 〈onresize) 是 用 户 改变 浏览 器 的 大 小 时 触发 事件 处 理 程序 ， 它 主要 用 于 固定 浏览 
器 的 大 小 。 

例 11.08 ”本 实例 使 用 JavaScript 技术 ， 实 现 刊 刮 卡 的 效果 。 首 先 创 建 一 个 HIML 页 面 ， 引 入 
mr-style.css 文件 ， 搭 建 页 面 的 布局 和 样式 ， 通 过 <canvas> 标 签 ， 引 入 乔 刮 卡 的 画布 。 然 后 编写 刊 刮 卡 
的 JavaScript 逻辑 代码 ， 通 过 addEventListener(0 方 法 ， 为 刊 刮 卡 的 图 层 图 片 添加 鼠标 事件 方法 。 接 着 编 
写 layer0 方 法 设置 刊 刮 卡 的 图 层 颜 色 , 并 编写 eventDown0 方 法 处 理 鼠 标 放下 事件 , 另外 还 需要 eventUpO 
方法 处 理 鼠 标 抬 起 事件 。 最 后 编写 eventMove0 方 法 处 理 鼠标 移动 事件 ， 关 键 代 码 如 下 。( 实例 位 置 : 
资源 包 \ 源 码 \11\11.08 ) 

01 <!IDOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 


05 <title> 使 用 JavaScript 实现 刊 刮 卡 效果 </title> 
06 <link rel="stylesheet" type="text/css" href="css/mr-style.css"/> 
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07 </head> 

08 <body> 

09 <divid="main"> 

10 <h2 class="top_title"><a href="#">JavaScript 实现 刮 刊 卡 效果 </a></h2> 
11 <div class="msg"> 刊 开 灰 色 部 分 看 看 ， 

‘2 <a href="javascript:void(0)" onClick="window.location.reload()"> 再 来 一 次 </a></div> 
13 <div class="demo"> 

14 <!-- 引 入 刊 刊 乐 画布 -> 

号 <canvas></canvas> 

16 </div> 

17 </div> 

18 </body> 

19 <script type="text/javascript"> 

20 var img = new Image(); 

21 var canvas = document.querySelector('canvas'"); 

22 canvas.style.backgroundColor = 'transparent'; 

23 canvas.style.position = 'absolute'; 

24 varimgs = [images/p_0.jpg'，images/p_1.jpg]; 

25 var num = Math .floor(Math.random() * 2); 

26 img.src = imgs[num]; 

pd img.addEventListener("load", function (e) { 

28 // 鼠 标 移动 

29 function eventMove(e) { 

30 e.preventDefault(); 

31 if (mousedown) { 

32 if (e.changedTouches) { 

33 e=e.changedTouches[e.changedTouches.length - 1]; 
34 日 

35 varx = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, 
36 y= (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; 
37 with (ctx){ 

38 beginPath() 

39 arc(x, y, 10, 0, Math.PI* 2); 

40 illO); 

41 } 

42 } 

43 } 

一 /此 处 省 略 部 分 代码 

45 canvas.width = w; 

46 canvas.height = h; 

47 canvas.style.backgroundlmage = "url(' + img.src + 人 小; 

48 ctx = canvas.getContext('2d"); 

49 ctx.fillStyle = "transparent'; 

50 ctx.fillRect(0, 0, w, h); 

51 layer(ctx); 

52 ctx.globalCompositeOperation = "destination-out '; 

S53 canvas.addEventListener('touchstart, eventDown); 

54 canvas.addEventListener(‘touchend', eventUp); 

S56 canvas.addEventListener(touchmove', eventMove); 

56 canvas.addEventListener("mousedown'", eventDown); 
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5 canvas.addEventListener('mouseup'", eventUp); 

58 canvas.addEventListener('mousemove", eventMove); 
59 D); 

60 </script> 

61 </html> 


运行 效果 如 图 11.15 所 示 。 


JavaScript 实 现 刊 刊 卡 效果 


甜 开 灰色 部 分 看 看 , 再 来 一 次 


有 世 =。 
， 燕 喜 你 中奖 了 


图 11.15 段落 换行 标签 的 页 面 效果 
ll 相 结 


本 章 重点 讲解 JavaScript 的 语言 基础 、 对 象 编程 和 事件 处 理 。 简 单 介绍 了 JavaScript 的 发 展 历史 。 
其 中 ， 需 要 读者 理解 事件 的 处 理 过 程 并 重点 掌握 正 和 DOM 标准 下 注册 和 移 除 事件 监听 器 的 方法 、 常 
用 的 事件 ， 以 及 在 JavaScript 和 HTML 中 事件 的 调用 方法 。 


11.6 实 战 


11.6.1 实战 一 : 制作 九 九 乘法 表 
试 着 使 用 for 循环 语句 ， 实 现 九 九 乘法 表 。( 资 源 包 \ 源 码 \II\ 实 战 01 ) 
11.6.2 ”实战 二 : 制作 手机 抽奖 页 面 
试 着 使 用 键盘 事件 ， 完 成 一 个 随机 抽取 手机 号 码 的 页 面 。( 资源 包 \ 源 码 \11\ 实 战 \02 ) 


11.6.3 ”实战 三 : 制作 购物 车 结算 页 面 


试 着 使 用 页 面 事件 ， 实 现 一 个 购物 车 的 结算 页 面 。( 资源 包 \ 源 码 \11\ 实 战 \03 ) 
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本 篇 介绍 了 绘制 图 形 、 文 件 与 拖 放 、JavaScript 对 象 编程 、 响 应 式 网 页 设计 、 
响应 式 组 件 等 内 容 。 学 习 完 本 篇 ， 相 信 读 者 就 能 够 开发 一 些 中 小 型 应 用 程序 。 
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绘制 图 形 
( 名 1 视频 讲解 : 小 时 15 分 钟 ) 


HTML5 中 的 一 个 新 增 元 素 一 一 Canvas 元 素 , 以 及 伴随 这 个 元 素 而 来 的 一 套 编 
程 接 口 一 一 Canvas APl。 使 用 Canvas API 可 以 在 页 面 上 绘制 出 任何 你 想 要 的 、 非 常 
漂亮 的 图 形 与 图 像 ， 创 造 出 更 加 丰富 多 和 彩 、 赏 心 悦 目 的 Web 页 面 。 本 章 将 对 如 何 
使 用 Canvas 绘制 图 形 进 行 详细 讲解 。 

学 习 摘 要 : 

Wm” 认识 HTML5 中 的 画布 Canvas 

WI 绘制 基本 图 形 

WI 绘制 变形 图 形 

WI 绘制 文字 
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12.1 认识 HTML5 中 的 画布 Canvas 


Canvas 标签 是 HIML5 中 新 增 的 一 个 重要 元 素 ， 专 门 用 来 绘制 图 形 。 当 用 户 在 HIML5 页 面 中 添 
加 Canvas 标签 后 ， 系 统 会 自动 生成 一 个 宽 300 像素 、 高 150 像素 的 画布 ， 用 户 可 以 在 画布 中 绘制 各 种 
图 形 。 


12.1.1 Canvas 概述 


虽然 Canvas 画布 有 默认 的 大 小 , 但 是 用 户 可 以 根据 需要 自 定义 其 大 小 或 者 设置 其 他 特性 。 在 页 面 
中 加 入 了 Canvas 元 素 后 ， 可 以 在 其 中 添加 图 片 、 线 条 以 及 文字 ， 也 可 以 在 里 面 绘制 图 形 ， 还 可 以 加 入 
高 级 动画 。 在 页 面 中 创建 Canvas 画布 的 语法 如 下 。 

01 <canvas width="" height="" id=""> </canvas> 
width: 所 创建 的 画布 的 宽度 ， 单 位 为 像素 。 
height: 所 创建 画布 的 高 度 。 
id: 设置 画布 的 id 属性 。 主 要 是 为 了 在 开发 过 程 中 可 以 通过 来 快速 找到 该 Canvas 元 素 。 对 于 
任何 Canvas 元 素来 说 ，id 都 是 尤为 重要 的 ， 这 主要 是 因为 对 Canvas 元 素 的 所 有 操作 都 是 通 
过 脚本 代码 控制 的 ， 如 果 没 有 id， 想 要 找到 要 操作 的 Canvas 元 素 会 很 难 。 


12.1.2 ”使 用 Canvas 绘制 矩形 


加 加 加 


绘制 矩形 时 ， 一 般 会 用 到 rect0 方 法 ， 语 法 如 下 。 
01 rect(x,y,w,h) 


回 x: 矩形 左上 角 定 点 的 横 坐标 。 

回 y: 矩形 左上 角 定 点 的 纵 坐 标 。 

回 w: 和 矩形 的 宽度 。 

回 h: 矩形 的 高 度 。 

例 12.01 下面 通过 使 用 Canvas 绘制 棋盘 , 来 了 解 使 用 Canvas 的 主要 过 程 。 该 实例 的 实现 步骤 如 下 。 
(1) 在 HTML 页 面 中 添加 Canvas 标签 ， 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \12\12.01 ) 


01 <div class="mr-cont"> 

02 <!-- 设 置 画 布 高 为 504 像素 ， 宽 为 700 像素 ， 并 且 设 置 id 为 cav--> 
03 <canvas id="cav" height="504" width="700"></canvas> 

04 </div> 


(2) 创建 CSS 文件 ， 在 CSS 文件 中 为 Canvas 画布 添加 背景 图 片 等 ， 代 码 如 下 。 


01 .mr-cont{ 
02 height: 504px; 
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03 width: 700px; 

04 margin: 0 auto; 

oy 

06 #cav{ 

07 border: 1px solid #f00; 

08 background: url(../img/bg.png); 

09 } 

(3) 创建 JavaScript 文件 ， 在 JavaScript 文件 中 添加 代码 。 首 先 需要 使 用 document.getElementById0 

方法 取得 Canvas 元 素 ， 然 后 使 用 Canvas 元 素 的 getContext0 方 法 来 获得 图 形 上 下 文 ， 同 时 指明 绘制 的 
环境 类 型 ， 这 里 传递 的 参数 是 "2d"， 表 示 绘 制 的 环境 类 型 是 二 维 的 ， 它 也 是 目前 唯一 的 合法 值 ， 代 码 
如 下 。 


01 varcav= document.getElementByld("cav").getContext("2d"); 


(4) 获取 画布 和 图 形 上 下 文 以 后 ， 设 定 绘图 样式 (style)。 绘 图 样式 主要 有 两 种 : strokStyle 线条 
样式 和 fillStyle 填充 样式 。 而 所 谓 绘图 的 样式 ， 主 要 是 针对 图 形 的 颜色 而 言 的 ,但 是 并 不 限于 图 形 的 颜 
色 。 需 要 注意 的 是 ， 如 果 不 设 定 绘图 样式 的 话 ， 系 统 则 默认 绘图 样式 为 黑色 。 本 实例 只 设 定 了 线条 颜 
色 ， 代 码 如 下 。 

01 cav.strokeStyle = "rgb(147,109,70)"; 

(5) 设置 绘图 样式 以 后 ， 就 可 以 开始 绘制 图 形 了 。 本 实例 使 用 rect(0 方 法 绘制 矩形 ， 绘 制 以 后 ， 
需要 使 用 fill0 或 者 stroke0 方 法 绘制 填充 图 形 或 者 轮廓 图 形 。 填 充 图 形 是 指 填 满 图 形 内 部 ， 轮廓 图 形 是 
指 不 填 满 图 形 内 部 ， 只 绘制 图 形 的 外 框 。 本 实例 绘制 轮廓 矩形 ， 所 以 调用 stroke0 函 数 ， 代 码 如 下 。 


01 for(varj=0;j<10;j++){ 川 为 棋盘 列 数 
02 for (vari = 0;i < 10; i++){ 川 为 棋盘 行 数 
03 cav.beginPath(); 

04 // 每 个 格子 的 宽 高 都 为 50 像素 ， 语 法 rect(x, y, w, h) 
05 cav.rect(115 + j * 30, 85 + i * 30, 30, 30); 

06 cav.stroke(); 

07 } 

08 } 

09 cav.beginPath(); /棋盘 外 部 的 大 正方 形 
10 cav.lineWidth=4; // 设 置 线 宽 

11 cav.strokeRect(100,70,330,330); 

12 cav.stroke(); 


在 谷歌 浏览 器 中 运行 代码 ， 运 行 效果 如 图 12.1 所 示 。 
国内 多 学 两 招 
绘制 矩形 还 可 以 调用 fillRect0 和 strokeRect0 方 法 。 前 者 是 用 来 绘制 没有 边框 只 有 填充 色 的 矩 
形 ; 后 者 是 用 来 绘制 没有 填充 色 ， 只 有 边框 的 矩形 。 这 两 个 方法 的 4 个 参数 与 Tect0 方 法 的 参数 含 
义 相同 。 


图 12.1 使 用 Canvas 绘制 五 子 棋 棋 盘 


意 … 
| 给 制图 形 时 ， 只 用 绘制 矩形 或 者 绘制 国 形 等 方法 是 绘制 不 出 来 图 形 的 ， 只 有 调用 soke0 广 法 
”或 人 0 方法 后 ， 才 能 真正 绘制 出 图 形 。 


12.2 ”绘制 基本 图 形 


12.2.1 绘制 直线 

绘制 直线 时 ， 一 般 会 用 到 moveTo0 与 lineTo0 两 种 方法 。 而 在 绘制 图 形 时 ， 需 要 对 绘制 图 形 的 样式 
等 进行 设置 ， 下 面 将 有 关 的 方法 和 属性 进行 介绍 。 

1. moveTo() 方 法 


moveTo0 方 法 的 作用 是 将 光标 移动 到 指定 坐标 点 (x,y),， 绘制 直线 时 以 这 个 坐标 点 为 起 点 , 语法 
如 下 。 


01 moveTo(x,y) 


2. lineTo() 方 法 
lineTo0 方 法 在 上 一 个 顶点 与 参数 中 指定 的 直线 终点 (x,y) 之 间 绘 制 一 条 直线 ， 语 法 如 下 。 
01 lineTo(x,y) 
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3. closePath() 方 法 
closePath() 方 法 在 当前 点 与 起 始点 之 间 绘 制 一 条 路 径 ， 使 图 形成 为 封闭 图 形 ， 语 法 如 下 。 
01 closePath() 


4. fillStyle 属性 和 strokeStyle 属性 


fillStyle 属性 和 strokeStyle 属性 这 两 个 重要 的 属性 都 可 以 做 到 对 图 形 添加 颜色 ， 它 们 对 颜色 的 表示 
方式 相同 。 区 别 在 于 : fillStyle 是 对 图 形 的 内 部 填充 颜色 ， 而 strokeStyle 是 给 图 形 的 边框 添加 颜色 ， 语 
法 如 下 。 


01 cav.fillStyle = color 
02 cav.strokeStyle = color 


在 上 面 的 语法 中 ，color 可 以 是 表示 CSS 颜色 值 的 字符 串 、 渐 变 对 象 或 者 图 案 对 象 。 默 认 情况 下 ， 
线条 和 填充 颜色 都 为 黑色 CSS 颜色 值 #000000 )。 
5. 线 型 Line styles 
设置 线 型 的 属性 主要 有 以 下 3 个 。 
回 lineWidth 属性 : 该 属性 用 于 设置 当前 绘 线 的 粗细 ， 属 性 值 必须 为 正 数 。 默 认 值 是 1.0。 线 宽 是 
指 给 定 路 径 的 中 心 到 两 边 的 粗细 。 换 名 话说， 就 是 在 路 径 的 两 边 各 绘制 线 宽 的 一 半 。 
傅 党 网 错 误 


因为 画布 的 坐标 并 不 和 像素 直接 对 应 ， 当 需要 获得 精确 的 水 平 线 或 重 直 线 时 要 特别 注意 。 


回 lineCap 属性 : 线段 端点 显示 的 样子 。 其 属性 值 有 butt、round 和 square。 
六。 butt:， 向 线条 的 每 个 末端 添加 平 直 的 边缘 ， 这 是 Canvas 中 默认 的 线段 端点 显示 的 样子 。 
> ”round: 向 线条 的 每 个 末端 添 加 圆 形 线 帽 。 
> ”square: 向 线条 的 每 个 末端 添加 正方 形 线 帽 。 

回 lineJoin 属性 : 当 两 条 线 交 汇 时 ， 两 线段 端点 连接 处 所 显示 的 样子 。 其 属性 值 有 round ( 圆 角 )、 
bevel ( 斜 角 ) 和 miter ( 尖 角 )。 默 认 是 miter。 


注意 

人 无 论 是 moveTo(X,y) 还 是 lineTo(x,y)， 都 不 会 直接 绘制 图 形 ， 只 是 定义 路 径 的 位 置 。 只 有 在 调用 
了 fl0 或 stroke0 方 法 时 才 会 绘制 出 图 形 。 另 外， 一旦 设置 了 strokeStyle 或 fillStyle 的 值 ， 那么 这 个 
新 值 就 会 成 为 新 绘制 的 图 形 的 默认 值 . 如 果 想 要 给 每 个 图 形 上 不 同 的 颜色 , 就 需要 重新 设置 fillStyle 
或 strokeStyle 的 值 。 


例 12.02 使 用 直线 绘制 五 角 星 ， 然 后 通过 按钮 实现 单 击 按钮 时 ， 五 角 星 显示 或 隐藏 。 具 体 步 
如 下 。 
首先 , 创建 HTML 文件 ， 在 HTML 页 面 添加 Canvas 标签 和 按钮 ， 具 体 代码 如 下 。( 实例 位 置 : 资 
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源 包 \ 源 码 \12\12.02 ) 


01 <divclass="mr-con"> 

02 <canvas id="cav" height="547" width="1000" onload="hug()"></canvas> 
03 <input type="button" value=" 挂 星星 " onclick="show()"> 

04 </div> 


然后 在 JavaScript 页 面 中 编辑 实现 五 角 星 的 函数 ， 接 下 来 通过 调用 该 函数 ， 实 现 绘 制 多 个 五 角 星 ， 
具体 代码 如 下 。 


01 varctx= document.getElementByld("cav"); 

02 varcav = ctx.getContext("2d"); 

03 ”//X,y 为 五 角 星 最 左边 定点 坐标 ，n 为 五 角 星 的 缩小 倍数 ，c 为 五 角 星 的 填充 颜色 
04 function draw(x, y,n, c){ 


05 cav.beginPath(); 

06 cav.fillStyle = c; 

07 cav.moveTo(x / n, y / n); /moveTo() 方 法 绘制 起 点 (xn,yin) 
08 /WineTo() 方 法 绘制 从 上 一 个 项 点 到 ((x+50)/n,yin) 项 点 的 路 径 

09 cav.lineTo((x + 50) /n, y / n); 

10 cav.lineTo((x + 10) / n, (y + 30) / n); 

11 cav.lineTo((x + 25) / n, (y - 20)1n); 

12 cav.lineTo((x + 40) / n, (y + 30) / n); 

13 cav.closePath(); // 将 终点 与 起 点 连接 已 形成 闭合 路 径 
14 cav.fill(); /绘制 填充 图 形 

15 } 

16 _ function hug(){ 

17 draw(160, 86, 0.7, #ff0"); // 第 一 棵 树 的 树 项 大 五 角 星 
18 draw(487, 86, 0.7, #10"); // 第 二 棵 树 的 树 项 大 五 角 星 
19 draw(357, 286, 1.3, ‘#0ff); // 第 一 棵 树 的 其 他 小 的 五 角 星 
20 draw(320, 386, 1.5, #0f); 

2 draw(600, 566, 2.0, '#eca9f2'); 

22 draw(500, 666, 2.0, ‘#eca9f2"); 

23 draw(1050, 286, 1.5, #e0f084"); // 第 二 棵 树 挂 的 小 五 角 星 

24 draw(1500, 486, 2.0, #fe6869"); 

25 draw(1700, 686, 2.5, #88c7ef); 

26 draw(2550, 1000, 3.5, #ff589"); 

27 draw(1150, 450, 1.5, #ebcd97"); 

28 draw(2490, 1250, 3.5, 煌 5d1ff); 

2907 

最 后 ， 通 过 改变 画布 的 隐藏 与 显示 来 实现 五 角 星 闪烁 效果 ， 有 具体 代码 如 下 。 
01 function show(){ // 单 击 按钮 隐藏 或 显示 五 角 星 
02 // 如 果 canvas 状态 为 显示 ， 则 将 其 隐藏 。 反 之 ， 则 让 其 显示 

03 if (ctx.style.display == "block") { 

04 ctx.style.display = "none”; 

05 } 

06 else{ 

07 ctx.style.display = "block"; 

08 hug(); 
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09 } 
10 } 


实例 实现 效果 如 图 12.2 所 示 。 


图 12.2 圣诞 树 上 绘制 的 五 角 星 的 效果 
12.2.2 ”绘制 曲线 


贝 塞 尔 曲线 有 二 次 方 和 三 次 方 的 形式 ， 常 用 于 绘制 复杂 而 有 规律 的 形状 。 
绘制 贝 塞 尔 三 次 方 曲线 主要 使 用 bezierCurveTo0 方 法 ， 该 方法 可 以 说 是 lineTo0 的 曲线 版 ， 将 从 当 
前 坐标 点 到 指定 坐标 点 中 间 的 贝 塞 尔 曲线 追加 到 路 径 中 ， 语 法 如 下 。 


01 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 
bezierCurveTo() 方 法 的 参数 说 明 如 表 12.1 所 示 。 
表 12.1 bezierCurveTo() 方 法 的 参数 说 明 


参数 名 称 参数 含义 
cplx 第 一 个 控制 点 的 横 坐标 
cply 第 一 个 控制 点 的 纵 坐标 
cp2x 第 二 个 控制 点 的 横 坐标 
cp2y 第 二 个 控制 点 的 纵 坐标 
x 贝 塞 尔 曲线 的 终点 横 坐标 
y 贝 塞 尔 曲线 的 终点 纵 坐标 


绘制 二 次 贝 塞 尔 曲线 ， 使 用 的 是 quadraticCurveTo0 方 法 ， 语 法 如 下 。 
01 quadraticCurveTo(cp1x, cp1y, x, y) 
回 “cplx: 第 一 个 控制 点 的 横 坐 标 。 
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cply: 第 一 个 控制 点 的 纵 4 
x: 贝 塞 尔 曲线 的 终点 横 坐 标 。 
y: 贝 塞 尔 曲线 的 终点 纵 坐 标 。 


& 标 。 


使 用 quadraticCurveTo0 方 法 和 bezierCurveTo0 方 法 绘制 曲线 的 区 别 如 图 12.3 所 示 。 它 们 都 是 一 个 
起 点 一 个 终点 (图 中 的 曲线 端点 , 起 点 由 moveTo0 方 法 设 定 ), 贝 塞 尔 二 次 方 曲线 只 有 一 个 控制 点 ( 见 
图 12.3 中 最 高 点 )， 而 贝 塞 尔 三 次 方 曲线 有 两 个 。 


;i 


bezierCurve 


图 12.3 bezierCurve 与 quadraticCurve 的 区 别 


例 12.03 在 页 面 中 使 用 Canvas 绘制 七 星 靳 虫 ， 首 先 需 要 在 HTML 页 面 中 添加 Canvas 标签 ， 并 
且 设 置 大 小 以 及 ID 属性 ， 具 体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \12\12.03 ) 


01 
02 
03 


<div class="mr-cont"> 
<canvas id="cav" height="300" width="300"></canvas> 
</div> 


然后 在 JavaScript 页 面 中 获取 画布 和 图 形 上 下 文 , 并 且 通 过 绘制 多 条 曲线 组 合成 七 星 靳 虫 , 具体 代 


码 如 下 。 


01 
02 
03 
04 
05 


var cav = document.getElementByld("cav").getContext("2d"); 


cav.beginPath(); llbody 
cav.fillStyle = "#DC1534"; 

cav.moveTo(130, 90); // 设 置 起 点 
/ 贝 塞 尔 三 次 曲线 绘制 标 虫 身体 

cav.bezierCurveTo(90, 100, 90, 170, 130, 180); lleft 
Cav.bezierCurveTo(170, 170, 170, 100, 130, 90); Wright 

cav fill(); 

cav.beginPath(); l/head 


cav.lineWidth = 3; 

cav.moveTo(115, 99) 

/ 贝 塞 尔 三 次 曲线 绘制 杜 虫 头 部 

cav.bezierCurveTo(120, 70, 139, 70, 145, 99); 

cav.stroke(); 

cav.beginPath(); l/feeler-left 
cav.moveTo(125, 80) 

cav.quadraticCurveTo(115, 55, 110, 75); 

Cav.stroke(); 
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19 cav.beginPath(); /ffeeler-right 
20 cav.moveTo(135, 80) 

21 cav.quadraticCurveTo(145, 55, 150, 75); 

22 cav.stroke(); 


23 circle(130, 130, 10, 130, 90, 130, 180); licenter 

24 circle(115, 115, 5, 105, 115, 90, 100); lleft-top 

25 circle(110, 140, 5, 100, 135, 85, 130); lleft-center 

26 circle(115, 160, 5, 105, 155, 90, 170); /left-bottom 

27 circle(145, 115, 5, 155, 115, 170, 100); Wright-top 

28 circle(150, 140, 5, 160, 135, 175, 130); Wright-center 

29 circle(145, 160, 5, 155, 155, 170, 170); Wright-bottom 

30 ”/x,y,r 为 七 星 标 虫 背部 的 圆圈 的 圆心 和 半径 ; x1,y1,x2,y2 为 绘制 昆虫 六 只 脚 的 起 点 和 终点 
31 function circle(x, y, r, x1, y1, x2, y2){ licircle 

32 cav.beginPath(); /绘制 七 星 标 虫 背部 的 圆圈 


33 cav.strokeStyle = "#b28335"; 
34 cav.fillStyle = "#000"; 
35 cav.arc(x, y, r, 0, Math.PI* 2, true); 


36 cav.fill(); 
37 cav.stroke(); 
38 cav.beginPath(); /绘制 直线 实现 七 星 标 虫 脚 


39 cav.strokeStyle = "#000"; 
40 cav.lineWidth = 3; 

41 cav.moveTo(x1, y1); 

42 cav.lineTo(x2, y2); 

43 cav.stroke(); 


实例 运行 效果 如 图 12.4 所 示 。 


图 12.4 绘制 的 七 星 标 虫 


12.2.3 ”绘制 圆 形 


绘制 圆 形 时 ， 一 般 会 用 到 arc0 方 法 ， 语 法 如 下 。 


01 arc(x,y,radius,startAngle,endAngle,anticlockwise) 
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arc() 方 法 的 参数 解释 如 表 12.2 所 示 。 


表 12.2 arc() 方 法 的 参数 解释 


参数 名 称 参数 解释 

x 所 绘制 圆 形 的 圆心 的 横 坐 标 

y 所 绘制 圆 形 的 圆心 的 纵 坐标 

Tadius 所 绘制 圆 形 的 半径 

startAngle 绘制 圆 形 的 起 始 弧度 

endAngle 绘制 圆 形 的 终止 弧度 

anticlockwise 圆 形 的 绘制 方向 。 值 为 tue 时 表示 逆 时 针 ; 值 为 false 时 表示 顺 时 针 


例 12.04 在 HTML 页 面 中 添加 canvas 标签 ， 并 且 输 入 提示 文字 ， 具 体 代码 如 下 。( 实例 位 置 : 
资源 包 \ 源 码 \12\12.04 ) 


01 <divclass="mr-cont"> 


02 ”<span> 单 击 图 中 画布 ， 实 现 自动 绘制 随机 圆 形 </span> 
03 <canvas height="600" width="800" id="cav" onClick="setlnterval(drew,1000)"></canvas> 
04 </div> 


在 JavaScript 文件 编辑 绘制 圆 形 的 函数 ， 并 且 设 置 相关 参数 ， 具 体 代码 如 下 。 


01 varcav= document.getElementByld("cav").getContext("2d"); 
02 function drew(){ 


03 // 圆 形 的 相关 参数 
04 var x = Math.round(Math.random() * 800); // 圆 形 横 坐标 
05 vary = Math.round(Math.random()* 600); // 圆 形 纵 坐标 
06 varr= Math.round(Math.random() * 40 + 1); // 圆 形 半径 
07 varc= Math.round(Math.random() * 5); // 圆 形 填充 颜色 
08 circle(x, y, r, ©); // 调 用 绘制 圆 形 的 函数 
092 上 } 
10 function circle(x, y, r, c){ 
11 // 用 数组 存放 圆 形 填充 颜色 
12 varstyle =['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)', ‘rgba(255,0,255,0.5)', 'rgba(132,50,247,0.8)', 
‘rgba(34,236,182,0.5)', 'rgba(147,239,115,0.5)"]; 
13 cav.beginPath(); 
14 cav.fillStyle = style[c]; 
15 cav.arc(x, y, r, 0, Math.PI* 2, true); // 绘 制 圆 形 
16 Cav.fill(); 
yD 
实例 运行 效果 如 图 12.5 所 示 。 
国内 多 学 两 招 


绘制 圆 形 的 方法 还 可 以 用 于 绘制 扇形 和 圆 弧 ， 只 需 改 变 起 始 弧度 和 终止 弧度 以 及 绘制 的 方向 
等 。 希 望 读者 能 灵活 运用 公式 。 
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图 12.5 实现 随机 画 圆 


12.3 绘制 变形 图 形 


使 用 HTMLS5 中 的 Canvas 不 仅 可 以 绘制 基本 的 图 形 , 还 可 以 绘制 变形 图 形 , 这 里 的 变形 是 指 平移 、 
缩放 和 旋转 。 下 面具 体 介绍 各 种 变形 效果 的 实现 方法 。 


12.3.1 绘制 平移 效果 的 图 形 


绘制 平移 效果 的 图 形 主 要 通过 translate0 方 法 来 实现 的 ， 有 具体 语法 如 下 。 
01 translate(x, y) 


x: 表示 将 坐标 轴 原 点 向 左 移动 多 少 个 单位 ， 默 认 情况 下 为 像素 。 

y: 表示 将 坐标 轴 原 点 向 下 移动 多 少 个 单位 。 

例 12.05 在 HIML 页 面 中 插入 Canvas 标签 ， 并 且 添加 input 按钮 ， 具 体 代码 如 下 。( 实例 位 置 : 
资源 包 \ 源 码 \12\12.05 ) 

01 <div class="mr-cont'> 

02 <canvas id="cav" height="600" width="800"></canvas> 


03 <input type="button" onClick="go()" value=" 前 进 "> 
04 </div> 


在 JavaScript 页 面 中 绘制 卡车 图 像 ， 然 后 使 用 translate0 方 法 平移 画布 ， 具 体 代 码 如 下 。 
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01 varcav=document.getElementByld("cav").getContext("2d"); 


02 Vvar i=0; 

03 function go(){ 

04 if(i<69){ 

05 cav.clearRect(50,500,80,80); /清空 出 一 块 矩形 

06 var img =new Image(); 

07 img.src="img/car.png"; /| 绘制 图 形 的 路 径 

08 img.onload=function(X{ // 当 图 片 被 加 载 时 ， 执 行 此 函数 
09 /绘制 img 图 形 ， 图 形 起 点 坐标 为 (50,.500)， 宽 和 高 都 为 50 像素 
10 cav.drawlmage(img,50,500,80,80); 

| $ 

12 cav.translate(10,0); /画布 向 右 平移 10 像素 
13 i++; 

14 } 

15 if(i==69){ 

16 alert( "前 方 没 路 了 ， 不 能 再 前 进 了 ") 

17 人 


实例 运行 效果 如 图 12.6 所 示 。 


前 进 


图 12.6 绘制 前 进 的 小 车 
12.3.2 ”绘制 缩放 效果 的 图 形 


使 用 图 形 上 下 文 对 象 的 scale0 方 法 将 图 形 缩放 ， 语 法 如 下 。 
01 scale(x,y); 


回 x: 是 水 平方 向 的 放大 倍数 。 取 值 范围 0 一 1 时 为 缩小 ， 大 于 1 时 为 扩大 。 
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回 y: 是 垂直 方向 的 放大 倍数 。 取 值 范围 及 方法 同上 。 
例 12.06 在 HIML 页 面 中 添加 Canvas 标签 以 及 通过 input 标签 添加 按钮 ， 具 体 代码 如 下 。( 实例 
位 置 : 资源 包 \ 源 码 \12\12.06 ) 


01 <divclass="mr-cont"> 

02 <canvas id="cav" height="600" width="800"></canvas> 
03 <input type="button" value=" 快 点 长 大 " onClick="big()"> 
04 </div> 


在 JavaScript 绘制 图 形 ， 并 且 通 过 scale0 函 数 缩放 画布 ， 具 体 代 码 如 下 。 


01 varctx = document.getElementByld("cav") 

02 varcav = ctx.getContext("2d"); 

03 /绘制 中 心平 移 至 画布 中 心 

04 cav.translate(ctx.height / 2, ctx.width / 2); 

05 function big(){ 

06 cav.clearRect(-25, -25, 50, 50); /清除 一 块 矩形 


07 var img = new Image!(); 

08 img.src = "img/flower.png"; /绘制 图 像 的 路 径 

09 img.onload = function (){ 

10 /图像 的 起 点 坐标 为 (-25,-25)， 宽 和 高 都 为 50 像素 

11 cav.drawlmage(img, -25, -25, 50, 50); 

12 上 

13 cav.scale(1.05, 1.05); // 横 向 和 纵向 都 放大 1.05 倍 
A 


实例 运行 效果 如 图 12.7 所 示 。 


图 12.7 绘制 放大 效果 的 向 日 葵 
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12.3.3 ”绘制 旋转 效果 的 图 形 


使 用 图 形 上 下 文 对 象 的 rotate0 方 法 将 图 形 进行 旋转 。 该 方法 的 语法 如 下 。 
0 


3 


rotate(angle) 


在 上 面 的 语法 中 ，angle 指 旋转 的 角度 ， 旋 转 的 中 心 点 是 坐标 轴 的 原点 。 默 认 按 顺 时 针 方 向 旋转 ， 
要 想 按 逆 时 针 旋 转 ， 只 需要 将 angle 设 定 为 负数 即 可 。 

例 12.07 在 HTML 页 面 中 添加 Canvas 画布 和 要 绘制 的 图 形 ， 具 体 代码 如 下 。( 实例 位 置 : 资源 
包 \ 源 码 \12\12.07 ) 


01 <divclass="mr-can"> 


02 <canvas id="cav" width="1000" height="750"></canvas> 
03 <img src="images/phone.png" alt=" id="pic"> 
04 </div> 


在 JavaScript 页 面 中 绘制 旋转 效果 图 形 ， 具 体 代 码 如 下 。 


01 window.onload = function showpic(){ 


02 Var cav = document.getElementByld('cav').getContext('2d"); 

03 var pic = document.getElementByld('pic’); /获取 HTML 页 面 中 的 图 形 
04 for(vari=0;i<5;i++){ 

05 cav.beginPath(); 

06 cav.translate(890, -155); /平移 画布 

07 cav.rotate(2 * Math.P11 5); // 将 手机 旋转 2*Math.PI 弧度 
08 cav.drawlmage(pic, 450, 350, 88, 150); /绘制 图 形 

09 

10 } 


实例 运行 效果 如 图 12.8 所 示 。 


BLLEN 


EN 


菜油 爆 品 直 降 100 


图 12.8 绘制 旋转 效果 手机 
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12.4 绘制 文字 


HTML5 中 ， 可 以 使 用 Canvas 元 素 进行 文字 的 绘制 ， 同 时 也 可 以 指定 绘制 文字 的 字体 、 大 小 、 
对 齐 方式 等 ， 还 可 以 进行 文字 的 纹理 填充 等 。 


12.4.1 绘制 轮廓 文字 


strokeText() 方 法 用 轮廓 方式 绘制 字符 串 ， 语 法 如 下 。 
01 strokeText(text,x,y,maxWidth); 


回 text: 表示 要 绘制 的 文字 。 

加 x: 表示 绘制 文字 的 起 点 横 坐 标 。 

加 y: 表示 绘制 文字 的 起 点 纵 坐标 。 

回 maxWidth: 可 选 参数 ， 表 示 显 示 文 字 时 的 最 大 宽度 ， 可 以 防止 文字 溢出 。 

例 12.08 在 HTML 页 面 中 添加 Canvas 标签 和 input 文本 框 ， 该 文本 框 用 于 按钮 功能 ， 单 击 该 文 
本 框 即 可 实现 绘制 文字 ， 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \12\12.08 ) 


01 <divclass="mr-cont"> 
02 <canvas id="cav" height="600" width="800"></canvas> 


03 <div> 

04 <input type="text" id="txt"> 

05 <input type="button" value="draw" onClick="draw()"> 
06 </div> 

07 </div> 


在 JavaScript 页 面 中 实现 绘制 文字 ， 具 体 代 码 如 下 。 


01 var txt = document.getElementByld("txt"); 

02 varcav= document.getElementByld("cav").getContext("2d"); 

03 var font = [宋体 楷体， 华文 新 瑶 '，' 华 文 行 楷 , 方正 书 体 , 方正 姚 体 ]// 字 体 
04 /设置 文字 颜色 

05 var style = [#00", #ff0", #f0f, 'rgb(132,50,247)", 'rgb(34,236,182)", "rgb(147,239,115)"] 
06 function draw(){ 

07 // 将 上 一 次 绘制 的 文字 清除 

08 cav.clearRect(0, 0, 600, 800); 

09 /| 生成 一 个 随机 数 ， 实 现 随 机 字体 和 文字 颜色 

10 var i = Math.round(Math.random() * 6); 

yk | cav.beginPath(); 

12 cav.font = "60px " + font[]; 

13 cav.strokeStyle = style[i]; 

14 cav.strokeText(txt.value, 300, 300); /绘制 轮廓 文字 

in cav.stroke(); 
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实例 运行 效果 如 图 12.9 所 示 。 


图 129 绘制 轮廓 文字 
12.4.2 ”绘制 填充 文字 


fillText0 方 法 用 填充 方式 绘制 字符 串 ， 该 方法 的 定义 如 下 。 

01 fillText(text,x,y,[maxWidth]); 

例 12.09 在 HTML 页 面 中 添加 Canvas 标签 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \12\12.09 ) 
01 <div class="mr-cont"> 


02 <canvas id="cav" height="540" width="540"></canvas> 
03 </div> 


在 JavaScript 页 面 中 绘制 文字 ， 并 且 通 过 平移 、 旋 转 效果 实现 表盘 上 文字 ， 代 码 如 下 。 


01 varcav= document.getElementByld("cav").getContext("2d"); 
02 vartext= [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130] 


03 vartemp = -Math.PI1(4* 2.3); // 旋 转 弧 度 

04 cav.textAlign = "start'; /文本 水 平 对 齐 方式 

05 cav.textBaseline = ,middle'; /文本 垂直 方向 ， 基 线 位 置 
06 “cav.font = "25px 华文 新 魏 "; // 字 体 和 字号 

07 cavfillStyle = "rgb(2,167,255)"; // 字 体 颜 色 

08 for(vari=0;i< text.length; i++){ 

09 cav.save(); /保存 当前 绘制 状态 

10 cav.beginPath(); /开始 绘制 

11 cav.translate(270, 270); // 将 绘制 圆心 移 至 画布 中 心 
12 cav.rotate(temp * i); /| 每 个 字 的 旋转 角度 

13 cav.fillText(text[i], 115, 115); /| 逐个 绘制 ， 绘 制 起 点 为 《115,115) 
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14 cav.fill(); 
15 cav.restore(); /| 恢复 保存 状态 
ES 


实例 效果 如 图 12.10 所 示 。 


12.10 ”绘制 填充 文字 


12.4.3 ”文字 相关 属性 


在 使 用 Canvas API 来 进行 文字 的 绘制 之 前 ， 需 要 先 对 该 对 象 的 有 关 文 字 绘 制 的 属性 进行 设置 ， 主 


要 有 如 下 几 个 属性 。 
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回 font 属性: 设置 文字 字体 。 

回 textAlign 属性 : 设置 文字 水 平 对 齐 方式 ， 属 性 值 可 以 为 start、end、left、right 以 及 center。 默 
认 值 为 start。 

回 textBaseline 属性 : 设置 文字 垂直 对 齐 方式 ， 属 性 值 可 以 为 ttp、hanging、middle、alphabetic、 
ideographic 以 及 bottom。 默 认 值 为 alphabetic。 

例 12.10 ”程序 开发 步骤 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \12\12.10 ) 

(1) 在 HIML 页 面 中 添加 以 下 代码 。 

01 <divclass="mr-cont"> 


02 <canvas id="cav" width="800" height="500"></canvas> 
03 </div> 


(2) 绘制 第 一 行文 字 。 创 建 JavaScript 文件 ， 在 JavaScript 页 面 添加 以 下 代码 。 


01 window.onload = function (){ 
02 Var canvas = document.getElementByld('cav’); 


03 var cav = canvas.getContext(2d"); /获取 画布 上 下 文 
04 var txt1 =[ 降 '， 价 ， 促 ， 销 ]; // 将 第 一 行文 字 定义 成 一 个 数组 
05 cav.font = '60px 黑体 ' // 设 定 字体 和 字号 
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06 cav .fillStyle = '#fef200"; // 设 定 字 体 颜色 
07 vari=0; 

08 /使 用 定时 器 ， 使 文字 逐个 出 现 

09 var ds = setinterval(txtline1, 90) 

10 function txtline1() { 


11 cav.beginPath(); /开始 绘制 

12 cav.fillText(txt1[], 230, 270); /| 绘制 第 i 个 文字 

13 cav.translate(70, 0); // 将 文字 向 右 平移 70 像素 

14 cav.fill(); 

5 RE 

16 if (i == txt1.length){ /文字 全 部 绘制 时 ， 取 消 定 时 器 
17 clearlnterval(ds) 

18 } 

19 } 


20 setTimeout(txtline2, 1000) 
21 function txtline2() { 


22 var txt2 =[' 哪 , ' 家 ', ' 强 ]; 

23 varj=0; 

24 Var ds1 = setlnterval(function () { 
25 cav.beginPath(); 

26 cav.filiText(txt20], 290, 340); 
27 cav.translate(70, 0); 

28 cav.fill(); 

29 ] 

30 if( == txt2.length) { 

31 clearlnterval(ds1) 

32 } 

33 }, 90); 

34 cav.translate(-300, 0); 

35 } 

36 } 


实例 效果 如 图 12.11 所 示 。 


图 12.11 使 用 Canvas 元 素 实现 动态 打字 效果 
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12.5 小 结 


本 章 重点 讲解 了 HTML5 新 增 的 画布 ，Canvas 功能 以 及 伴随 这 个 功能 而 来 的 一 套 编程 接口 一 一 
Canvas API。 其 中 ， 详 细 讲 解 了 如 何 使 用 Canvas API 绘制 各 种 图 形 ， 并 在 讲解 实例 的 同时 对 绘制 中 应 
用 到 的 各 种 属性 进行 了 详细 的 阐述 。 和 希望 读者 能 了 解 并 熟练 掌握 HTMLS 新 增 的 Canvas 元 素 ， 以 此 来 
创造 出 更 加 丰富 多 彩 、 人 赏心悦目 的 Web 页 面 。 


12.6 实 战 


12.6.1 实战 一 : Canvas 绘制 移动 的 正方 形 

使 用 Canvas 绘制 移动 的 正方 形 。( 资源 包 \ 源 码 \12\ 实 战 \01 ) 
12.6.2 ”实战 二 : 制作 游戏 弹 幕 效果 

在 Canvas 画布 中 实现 游戏 弹 幕 效果 。( 资源 包 \ 源 码 \12\ 实 战 \02 ) 
12.6.3 ”实战 三 :实现 计时 器 


绘制 轮廓 文字 实现 计时 器 。( 资源 包 \ 源 码 \12\ 实 战 \03 ) 


RE 


文件 与 拖 放 
( 名 视频 讲解 : 37 分 钟 ) 


在 HTML5 中 新 增 的 与 表单 元 素 相 关 的 两 个 API: 文件 API 和 拖 放 API。 通 过 
使 用 文件 API， 从 Web 页 面 上 访问 本 地 文件 系统 或 服务 器 端 文件 系统 的 相关 处 理 
将 会 变 得 十 分 简单 。 而 拖 放 API 可 以 实现 一 些 有 趣 的 功能 。 这 个 API 就 像 其 名 称 所 
示 的 那样 ， 色 许 我 们 抱 奥 元素 并 将 其 放置 到 浏览 器 中 的 任何 地 方 。 这 些 强大 API 可 
以 帮助 我 们 通过 少量 的 JavaScript 代码 实现 更 多 有 趣 的 功能 。 

学 习 摘 要 : 

MW” 选择 文件 

ml， 读 取 文件 

Wl 拖 放 文件 
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13.1 选择 文件 


在 HTML5 里 ， 从 Web 网 页 上 访问 本 地 文件 系统 变 的 十 分 简单 ， 那 就 是 使 用 FileAPI。File 规范 说 
明 里 提供 了 一 个 API 来 表现 Web 应 用 里 的 文件 对 象 , 你 可 以 通过 编程 来 选择 它们 , 并 访问 它们 的 信息 。 
关于 文件 API， 到 目前 为 止 只 有 部 分 浏览 器 对 它 提供 支持 ， 比 如 最 新 版 的 Firefox 浏览 器 。 


13.1.1 通过 file 对 象 选择 文件 


FileList 对 象 表 示 用 户 选择 的 文件 列表 。 在 HTML4 中 ，file 控件 内 只 允许 放置 一 个 文件 ， 但 是 到 
了 HTML5 中 ， 通 过 添加 multiple 属性 ， 在 file 控件 内 允许 一 次 放置 多 个 文件 。 控 件 内 的 每 一 个 用 户 选 
择 的 文件 都 是 一 个 file 对 象 ， 而 FileList 对 象 则 为 这 些 file 对 象 的 列表 ， 代 表 用 户 选择 的 所 有 文件 。file 
对 象 有 两 个 属性 : name 属性 表示 文件 名 , 不 包括 路 径 ; lastModifiedDate 属性 表示 文件 的 最 后 修改 日 期 。 

例 13.01 在 本 实例 中 , 当 用 户 选择 文件 并 单 击 上 传 以 后 , 在 页 面 会 自动 弹出 提问 用 户 是 否 提交 的 
对 话 框 ， 在 对 话 框 中 ， 显 示 有 用 户 所 选 文件 的 文件 名 ， 有 具体 操作 如 下 。 

在 HTML 页 面 添加 两 个 input 标签 ， 分 别 用 来 选择 文件 和 上 传 ， 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 
码 \13\13.01 ) 


01 <divclass="mr-cont"> 
02 ”<h2> 用 户 信息 注册 </h2> 
03 <div class="mr-head"> 


04 <input type="file" id="file"> 

05 <input type="button" value=" 上 传 " onclick="sure()"> 
06 </div> 

07 </div> 


在 JavaScript 页 面 添加 代码 ， 以 获取 所 选 文 件 的 文件 名 并 且 弹 出 确定 上 传 的 对 话 框 ， 代 码 如 下 。 


01 function sure() 


02 { 

03 var file; 

04 // 返 回 FileList 文件 列表 对 象 

05 for(var i=0;i<document.getElementByld("file").files.length;i++) 

06 上 

07 file = document.getElementByld("file").files[i]; //file 对 象 为 用 户 选择 的 单个 文件 
08 if (confirm(" 确 定 上 传 图 片 " + file.name + ”作为 头像 ? ")){ /弹出 文件 名 
09 alert(" 已 上 传 "); 

10 人 

Wl else{ 

12 alert(" 已 取消 上 传 "); 

13 } 

14 } 

45 
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在 浏览 器 中 运行 HTML 页 面 ， 首 先 单 击 “ 选 择 文件 ”按钮 以 选择 要 上 传 的 文件 ， 然 后 单 击 “ 上 传 ” 
按钮 将 会 弹出 一 个 确定 上 传 该 文件 的 对 话 框 , 在 该 对 话 框 中 显示 所 选 文件 的 名 称 , 效果 如 图 13.1 所 示 。 


用 户 信息 注册 


A 个 人 天竺 


其 二 资料。 头 售 到 片 


硬汉 Luopm 


账 S 和 P= ~ 
去 4 此 网 页 明示 : 
个 人 码 二 上 可 图 片 bigpng 作为 头 多 7 
详 且 。 口 本 上 此 瑞 再 于 示 时 和 全 
人 
[3 到 疝 
3 


图 13.1 实现 确定 上 传 该 头像 的 运行 效果 
13.1.2 使 用 Blob 接口 获取 文件 的 类 型 与 大 小 


Blob 表示 二 进 制 原始 数据 , 它 提供 一 个 slice 方法 , 可 以 通过 该 方法 访问 到 字 节 内 部 的 原始 数据 块 。 
Blob 对 象 有 两 个 属性 ， 分 别 是 size 属性 和 type 属性 。size 属性 表示 一 个 blob 对 象 的 字 节 长 度 ，type 属 
性 表示 blob 的 MIME 类 型 ， 如 果 是 未 知 类 型 ， 则 返回 一 个 空 字符 串 。 

例 13.02 本 实例 主要 实现 当 单 击 上 传 头像 时 , 判断 所 上 传 文件 的 大 小 和 类 型 是 否 符合 条 件 , 并 且 
以 对 话 框 的 形式 告知 用 户 文件 是 否 可 以 上 传 ， 具 体 步 又 如 下 。 

在 HIML 页 面 中 ， 编 写 页 面 的 基本 内 容 ， 其 中 有 关上 传 文件 部 分 的 代码 如 下 。( 实例 位 置 : 资源 
包 \ 源 码 \13\13.02 ) 

01 <div class="mr-cont"> 


02 ”<h2> 用 户 信息 注册 </h2> 
03 <div class="mr-head"> 


04 <input type="file" id="file"> 

05 <span>*** 允 许 的 上 传 格式 有 JPG、PNG 和 JPEG。****</span> 
06 <span>***** 图 | 片 大 小 不 能 超过 222550 字 节 。 xxxws</SPan> 

07 <input type="button" value=" 上 传 " onclick="Show()"> 

08 </div> 

09 </div> 


在 JavaScript 页 面 中 ， 通 过 站 判断 语句 判断 所 选择 文件 的 大 小 和 文件 类 型 ， 并 且 弹 出 对 应 的 对 话 
有 具体 代码 如 下 。 


01 function Show(){ 
02 var file = document.getElementByld("file").files[0]; 


茧 
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03 1/ 判断 并 显示 图 片 大 小 和 格式 
04 if ((file.size > 22250) ||(VimageV\w+/.test(file.type))) { 


05 alert(" 当 前 文件 大 小 为 " + file.size + "\n"+" 当 前 文件 格式 为 " + file.type + "请 重新 选择 文件 ") 
06 }else{ 

07 alert(" 当 前 文件 长 度 为 " + file.size + "\n'+" 类 型 为 " + file type + "符合 上 传 条 件 ") 

08 } 

09 } 


在 浏览 器 中 运行 HTML 文件 ， 运 行 效果 如 图 13.2 所 示 。 
用 户 信息 注册 


本 


基本 资 村 。 头 和 印 轨 片 


13.2 判断 所 上 传 文件 是 否 符合 要 求 


对 于 图 像 类 型 的 文件 ，Blob 对 象 的 type 属性 都 是 以 “image/” 开 头 的 ， 后 面 紧 跟 该 图 像 的 类 型 ， 
利用 此 特性 我 们 可 以 在 JavaScript 中 判断 用 户 选择 的 文件 是 否 为 图 像 文 件 ， 如果 在 批量 上 传 时 ,只 允许 
上 传 图 像 文 件 ， 可 以 利用 该 属性 。 如 果 用 户 选择 的 多 个 文件 中 有 不 是 图 像 的 文件 时 ， 可 以 弹出 错误 提 
示 信 息 说 止 后 面 的 文件 上 传 ， 或 者 跳 过 这 个 文件 ， 不 上 传 该 文件 。 


13.2 读 取 文件 


FileReader 接口 主要 用 来 把 文件 读 入 内 存 ， 并 且 读 取 文件 中 的 数据 。FileReader 接口 提供 了 一 个 异 
步 API， 使 用 该 API 可 以 在 浏览 器 主线 程 中 异步 访问 文件 系统 ， 读 取 文 件 中 的 数据 。 


13.2.1 ”FileReader 接口 的 方法 以 及 事件 


在 介绍 FileReader 接口 的 方法 之 前 , 需要 简单 了 解 如 何 检 测 浏览 器 对 FileReader 接口 的 支持 性 。 而 
支持 这 一 接口 的 浏览 器 有 一 个 位 于 Window 对 象 下 的 FileReader 构造 函数 ， 如 果 浏 览 器 有 这 个 构造 函 
数 ， 那 么 就 可 以 新 建 一 个 FileReader 的 实例 来 使 用 。 有 具体 的 JavaScript 代码 如 下 。 
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01 if(typeof FileReader === "undefined ) 


{ 
03 alert( " 您 的 浏览 器 未 实现 FileReader 接口 " ); 


07 var reader = new FileReader(); /正常 使 用 浏览 器 

08 } 

FileReader 接口 的 实例 拥有 4 个 方法 ， 其 中 3 个 用 以 读 取 文 件 ， 一 个 用 来 中 断 读 取 。 表 13.1 列 出 
了 这 些 方法 以 及 它们 的 参数 和 功能 ， 需 要 注意 的 是 ， 无论 读 取 成 功 或 失败 ,方法 并 不 会 返回 读 取 结果 ， 
这 一 结果 存储 在 result 属性 中 。 


表 13.1 FileReader 接口 的 方法 


| 
oe 
| fl | 将 文件 读 取 为 = 进 制 友 
readAsDataURL | me | 将 文件 读 取 为 DataURL 
readAsText 将 文件 读 取 为 文本 
回 readAsBinaryString: 它 将 文件 读 取 为 二 进 制 字符 串 ， 通 常 我 们 将 它 传送 到 后 端 ， 后 端 可 以 通 
过 这 段 字 符 串 存储 文件 。 


回 readAsDataURL: 该 方法 将 文件 读 取 为 一 段 以 data 开头 的 字符 串 ， 这 段 字 符 串 的 实质 就 是 
DataURI，DataURI 是 一 种 将 小 文件 直接 嵌入 文档 的 方案 。 这 里 的 小 文件 通常 是 指 图 像 与 
HTML 等 格式 的 文件 。 

回 readAsText: 该 方法 有 两 个 参数 ， 其 中 第 二 个 参数 是 文本 的 编码 方式 ， 默 认 值 为 UTF-8。 这 
个 方法 非常 容易 理解 ， 将 文件 以 文本 方式 读 取 ， 读 取 的 结果 即 是 这 个 文本 文件 中 的 内 容 。 

FileReader 包含 了 一 套 完整 的 事件 模型 ， 用 于 捕获 读 取 文 件 时 的 状态 ， 表 13.2 归纳 了 这 些 事件 。 


表 13.2 FileReader 接口 的 事件 


事件 描述 

onabort 中 断 时 触发 

onerror 出 错时 触发 

onload 文件 读 取 成 功 完成 时 触发 
onloadend 读 取 完 成 触发 ， 无 论 成 功 或 失败 
onloadstart 读 取 开始 时 触发 

oi ess, 读 取 中 


当 FileReader 对 象 读 取 文件 时 ， 会 伴随 着 一 系列 事件 ， 表 13.2 中 的 事件 表示 读 取 文件 时 不 同 的 读 
取 状 态 。 


13.2.2 ”使 用 readAsDataURL 方法 预览 图 片 
本 节 将 介绍 如 何 使 用 FileReader 接口 的 readAsDataURL 方法 实现 图 片 的 预览 。 
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例 13.03 ”本 实例 主要 实现 预览 头像 ， 当 用 户 选择 文件 后 ， 单 击 预览 ， 页 面 中 “照片 ”位 置 就 会 显 
示 所 选择 的 图 片 ， 具 体 实现 步骤 如 下 。 
在 HTML 页 面 中 编辑 页 面 内 容 ， 其 中 预览 照片 部 分 的 关键 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \ 


13\13.03 ) 
01 <div class="mr-cont"> 
02 ”<h2> 个 人 简历 </h2> 
03 <div> 
04 <div class="mess"> 
05 <div> 
06 <p> <span> 姓 名 :</span> 
07 <input type="text"> 
08 </p> 
09 <p><span> 性 别 :</span> 
10 <input type="text"> 
| </p> 
12 </div> 
13 <div> 
14 <p><span> 生 日 :</span> 
讲 <input type="text"> 
16 </p> 
17 <p><span> 年 龄 :</span> 
18 <input type="text"> 
19 </p> 
20 </div> 
21 <div> 
22 <p><span> 专 业 :</span> 
23 <input type="text"> 
24 </p> 
25 <p><span> 学 历 :</span> 
26 <input type="text"> 
27 </p> 
28 </div> 
23 </div> 
30 <div class="photo" id="result"></div> <!-- 预 览 头像 --> 
31 </div> 
S32 <div class="expr"> 
33 <h3> 校 内 经 历 和 所 获 荣誉 </h3> 
34 <div class="border"><textarea cols="84" rows="11"></textarea></div> 
35 </div> 
36 <div class="expr"> 
37 <h3> 社 会 经 历 </h3> 
38 <div><textarea cols="84" rows="11"></textarea></div> 
39 </div> 
40 <div class="btn"> 
41 <input type="button" value=" 选 择 头像 "> 
42 <input type="file" id= "file"> 
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43 <input type="button" value=" 预 览 " onClick="readFile ()"> 
44 </div> 
45 </div> 


在 JavaScript 页 面 编辑 预览 头像 的 代码 ， 代 码 如 下 。 


01 function readFile (X{ 


02 var file = document.getElementByld("file").files[0]; // 检 查 是 否 为 图 像 文件 
03 if(VimageV\w+/.test(file.type)) { 

04 alert(" 请 确保 文件 为 图 像 类 型 "); 

05 return false; 

06 } 

07 var reader = new FileReader(); 

08 readerreadAsDataURL(file); /将 文件 以 Data URL 形式 进行 读 入 页 面 
09 reader.onload = function(e) 让 

10 var result=document.getElementByld("result"); 

11 resultinnerHTML = '<img src="+this.result+" alt=""/>"// 在 页 面 上 显示 文件 
12 } 

13 > 


在 浏览 器 中 运行 HTML 文件 ， 在 弹出 的 界面 中 选择 头像 以 后 ， 单 击 “ 预 览 ” 按 钮 ， 页 面 右 上 角 即 
可 显示 图 片 内 容 ， 运 行 效果 如 图 13.3 所 示 。 


个 人 简历 

姓名 : 性 
wm 
生日 : EE wn 
专业 ; 学 历 "Wo 
校内 经 历 和 所 获 荣誉 
社会 经 历 
迁 接头 铺 Li] 


13.3 ”显示 读 取 的 图 像 
13.2.3 ”使 用 readAsText 方法 读 取 文本 文件 
本 节 将 介绍 如 何 使 用 FileReader 接口 的 readAsText 方法 实现 文本 文件 的 预览 。 
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例 13.04 在 本 例 中 通过 单 击 “选择 文件 ”按钮 ， 选 择 文件 以 后 ， 再 单 击 文字 “文件 预览 ”按钮 ， 
文本 文件 的 内 容 将 在 页 面 中 显示 ， 有 具体 步骤 如 下 。 
在 HIML 页 面 编辑 页 面 内 容 ， 并 且 为 相关 标签 设置 DD， 具 体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \ 


13\13.04 ) 


01 <divclass="mr-cont"> 


02 <label> 收 件 人 : <input type="text"></label> 

03 <label> 主 &nbsp; 题 : <input type="text" id="namee"></label> 
04 <div class="btn"> 

05 <input type="button" value=" 选 择 文件 "> 

06 <input type="file" id="file"> 

07 <input type="button" value=" 文 件 预览 "onClick="readAsText()"> 
08 </div> 

09 ”<div class="readd"><span> 预 览 窗口 :</span> 

10 <textarea id="result"></textarea> 

11 </div> 

12 </div> 


在 JavaScript 页 面 中 首先 通过 ID 获取 相应 标签 ， 然 后 使 用 readAsText 方法 读 取 文 本 文件 ， 最 后 将 
文本 文件 的 内 容 显 示 在 <textarea> 标 签 中 ， 具 体 代码 如 下 。 


01 varresult=document.getElementByld("result"); 
02 function readAsText() 


03 { 


var namee=document.getElementByld("namee"); /用 以 存储 文件 名 称 
var file = document.getElementByld("file").files[0]; 1/ 获取 文件 
namee.value=file.name; // 将 文件 名 称 赋值 给 name 
Var reader = new FileReader(); 
reader.readAsText(file,"GB2312"); l/readAsText( 文 件 ," 文 件 的 编码 格式 ") 
reader.onload = function(f) 


var result=document.getElementByld("result"); 
result.innerHTML=this.result; // 在 页 面 上 显示 读 入 文本 


在 浏览 器 中 打开 HTML 文件 ， 单 击 “ 选 择 文件 ”按钮 ， 选 择 文件 以 后 ， 再 单 击 “ 文 件 预览 ”按钮 ， 
即 可 在 下 方 的 文本 域 中 显示 文件 中 的 文字 内 容 ， 运 行 效果 如 图 13.4 所 示 。 
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13.3 拖 放 文件 


13.3.1 拖 放 页 面 元 素 


在 HTML5 中 ， 提 供 了 直接 支持 拖 放 操 作 的 API。 虽 然 HTML5 之 前 已 经 可 以 使 用 mousedown、 
mousemove、mouseup 来 实现 拖 放 操作 ， 但 是 只 支持 在 浏览 器 内 部 的 拖 放 ， 而 在 HTML5 中 ， 已 经 支持 
在 浏览 器 与 其 他 应 用 程序 之 间 的 数据 的 互相 拖 动 ， 同 时 也 大 大 简化 了 有 关于 拖 放 方面 的 代码 。 

在 HTML5 中 要 想 实现 拖 放 操 作 ， 至 少 要 经 过 如 下 两 个 步骤 。 

(1) 将 想 要 拖 放 的 对 象 元 素 的 draggable 属性 设 为 true(draggable="true")， 这 样 才能 将 该 元 素 进行 
拖 放 。 另 外 ，imsg 元 素 与 a 元 素 (必须 指定 href)， 默 认 人 允许 拖 放 。 
(2) 编写 与 拖 放 有 关 的 事件 处 理 代 码 。 关 于 拖 放 的 几 个 事件 如 表 13.3 所 示 。 
表 13.3 有 关 拖 放 的 事件 及 其 描述 
开始 拖 放 操作 
被 拖 放 的 元 素 开始 进入 本 元 素 的 范围 
被 拖 放 的 元 素 正在 本 元 素 范围 内 移动 
和 


拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 离开 本 元 素 的 范围 
拖 放 的 目标 元 素 有 其 他 元 素 被 拖 放 到 了 本 元 素 中 
拖 放 的 对 象 元 素 拖 放 操作 结束 


例 13.05 ”使 用 拖 放 API 实现 随意 拖 忠 表情 图 片 ， 并 且 当 图 片 被 拖 放 至 右边 矩形 中 时 ， 则 在 右边 
矩形 中 显示 提示 文字 。 实 现 的 步骤 如 下 。 
在 HTML 页 面 中 添加 提示 文字 和 图 片 等 信息 ， 有 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \13\13.05 ) 


01 <divclass="mr-cont"> 

02 ”<h1> 拖 放 图 片 和 文字 效果 </h1> 

03 ”<|-- 设 置 draggable 属性 为 true 一 > 

04 <div id="box"> 

05 <img src="img/face.png" title=" 我 是 可 以 被 拖 走 的 "id="dragme"> 


06 </div> 
07 <div id="text1" ></div> 
08 </div> 


在 JavaScript 页 面 中 添加 实现 拖 放 效 果 的 代码 ， 有 具体 代码 如 下 。 


01 function init(){ 
02 Var source = document.getElementByld("dragme"™); 
03 var dest1 = document.getElementByld("text1"); 
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04 UU(1) 拖 放 开始 
05 source.addEventListener("dragstart", function (ev) { 


06 var dt = ev.dataTransfer; // 追 加 数据 
07 dt.effectAllowed = "all 

08 //(2) 拖 动 元 素 为 dt.setData("text/plain", this.id); 

09 dt setData("text/plain"，" 哟 吼 ， 我 进来 了 "); 

10 }, false); 


11 /1(3) drop: 被 拖 放 
12 dest1.addEventListener("drop", function (ev){ 


13 var dt = ev.dataTransfer; 只 DataTransfer 对 象 那里 取得 数据 
14 var text = dt.getData("text/plain"); 

15 dest1.textContent += text; 

16 }, false); 


4 /1(4) dragend: 拖 放 结束 
18 source.addEventListener("dragend", function (ev) { 


19 source.style.position="absolute"; 

20 source.style.top=event.clientY-75+'px"; 

21 source.style.left=event.clientX-75+"px'; 

22 ev.preventDefault(); // 不 执行 默认 处 理 〈 拒 绝 被 拖 放 ) 
区 3 }, false); 

24 


} 
25 ”//(5) 设置 页 面 属性 ， 不 执行 默认 处 理 〈 拒 绝 被 拖 放 ) 
26 _ document.ondragover = function (e){ 
2 e.preventDefault(); 
28 } 
29 _ document.ondrop =function (e){ 
30 e.preventDefault(); 
ST 


运行 HTML 文件 ， 结 果 如 图 13.5 所 示 。 用 鼠标 将 图 片 拖 放 到 另 一 个 矩形 中 ， 结 果 如 图 13.6 所 示 。 


拖 放 图 片 和 文字 效果 拖 放 图 片 和 文字 效果 
哟 吼 ， 我 进来 了 
会 EN 全 SS 


C 
4 


图 13.5 页 面 运行 初始 效果 图 13.6 ”实现 拖 放 图 片 效果 


13.3.2 ”DataTransfer 对 象 的 属性 与 方法 


表 13.4 提供 了 一 些 常用 的 DataTransfer 对 象 的 属性 与 方法 。 
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表 13.4 DataTransfer 对 象 的 属性 与 方法 


属 性 对 属性 的 解释 属 性 值 
如 果 该 操作 效果 与 起 初 设置 的 effectAllowed 
dropEffec 效果 不 符 ， 则 拖 昌 操 作 失 败 None、 copy、 link、 move 
扳 同 介 许 要 行 a None 、copy 、copyLink 、 
effectAllowed 0 bs copyMove、 link、, linkMove、 
move、all、uninitialized 
返回 在 dragstart 事件 出 发 时 为 元 素 存储 数 
types 据 的 格式 ， 如 果 是 外 部 文件 的 拖 披 ， 则 返 
回 fles 
删除 指定 格式 的 数据 ， 如 果 未 指定 格式 ， 
ON 则 删除 当前 元 素 的 所 有 携带 数据 
setData(DOMStringformat, DOMString data) | 为 元 素 添加 指定 数据 
DOMString getData(DOMStringformat) 方 法 四 风机 先 攻 二/ 到 系数 执 机 本人 划 汉 加 
空 字符 串 
制定 拖 忠 元 素 时 跟随 鼠标 移动 的 图 片 ，x、 
setDragImage(Element image, x, y) y 分 别 是 相对 于 鼠标 的 坐标 〈 部 分 浏览 器 
中 可 以 用 canvas 等 其 他 元 素来 设置 ) 


对 于 getData 和 setData 两 个 方法 ，setData 方法 在 拖 放 开 始 时 向 dataTransfer 对 象 中 存 入 数据 ， 用 
types 属性 来 指定 数据 的 MIME 类 型 ， 而 getData 方法 在 拖 动 结束 时 读 取 dataTransfer 对 象 中 的 数据 。 
clearData 方法 可 以 用 来 清除 DataTransfer 对 象 内 数据 ， 辟 如 在 上 例 中 的 getData0 方 法 前 加 上 
“dt.clearData0; ”语句 ， 目 标 元 素 内 就 不 会 放 入 任何 数据 了 。 


13.3.3 ”使 用 effectAllowed 和 dropEffect 属性 设置 拖 放 效果 


dropEffect 属性 与 effectAllowed 属性 结合 起 来 可 以 设 定 拖 放 时 的 视觉 效果 。effectAllowed 属性 表示 
当 一 个 元 素 被 拖 忠 时 所 允许 的 视觉 效果 ， 一般 在 ondragstart 事件 中 设 定 ， 允 许 设 定 的 值 为 none、copy、 
copyLink、copyMove、link、linkMove、move、all、unintialize。dropEffect 属性 表示 实际 拖 放 时 的 视觉 
效果 ， 一 般 在 ondragover 事件 中 指定 ， 人 允许 设 定 的 值 有 none、copy、link、move。dropEffect 属性 所 表 
示 的 实际 视觉 效果 必须 在 effectAllowed 属性 所 表示 的 允许 的 视觉 效果 范围 内 ， 规 则 如 下 。 
(1) 如 果 effectAllowed 属性 设 定 为 none， 则 不 允许 拖 放 要 拖 放 的 元 素 。 
(2) 如 果 dropEffect 属性 设 定 为 none， 则 不 允许 被 拖 放 到 目标 元 素 中 。 
(3) 如 果 effectAllowed 属性 设 定 为 all 或 不 设 定 ， 则 dropEffect 属性 允许 被 设 定 为 任何 值 ， 并 且 
按 指定 的 视觉 效果 进行 显示 。 
(4) 如 果 effectAllowed 属性 设 定 为 具体 效果 (不 为 none 和 all)，dropEffect 属性 也 设 定 了 有 具体 视 
觉 效 果 ， 则 两 个 具体 效果 值 必须 完全 相等 ， 否 则 不 允许 将 被 拖 放 元 素 拖 放 到 目标 元 素 中 。 
拖 放 图 标 指 拖 忠 元 素 时 ， 鼠 标 旁 边 显示 的 图 标 ， 在 dragstart 事件 中 ， 可 以 使 用 setDragImage 方法 
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设 定 拖 放 图 标 ， 该 语法 如 下 。 
01 setDraglmage(image, x, y); 


image: 为 设 定 为 拖 放 图 标的 图 标 元 素 。 

x: 为 拖 放 图 标 离 鼠 标 指针 的 x 轴 方 向 的 位 移 量 。 

回 y: 为 拖 放 图 标 离 鼠 标 指针 的 y 轴 方向 的 位 移 量 。 

例 13.06 本 实例 使 用 setDragImage() 方 法 设置 拖 放 图 片 时 的 拖 放 图 标 。 

本 实例 的 实现 代码 与 实例 13.05 基本 相同 ， 只 是 在 实现 “开始 拖 放 ”的 代码 中 需要 添加 设置 拖 放 图 
标的 代码 ， 这 部 分 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \13\13.06 ) 


01 var draglcon = document.createElement('img"); 


02 draglcon.src = 'img/small.png'; // 设 定 图 标 来 源 
03 source.addEventListener("dragstart", function (ev) { /1(1) 拖 放 开始 
04 var dt = ev.dataTransfer; // 追 加 数据 


05 dt.effectAllowed = 'all 

06 dt.setDraglmage(draglcon, 20, 20); 

07 /2) 拖 电 元 素 为 dt.setData("text/plain", this.id); 
08 dtsetData("text/plain"，" 哟 吼 ， 我 进来 了 "); 

09 },false); 


完成 代码 以 后 ， 运 行 HTML 文件 ， 页 面 效果 如 图 13.7 所 示 ， 当 使 用 鼠标 拖 放 图 片 时 ， 页 面 效 果 如 
图 13.8 所 示 。 


设置 拖 放 图 标 设置 拖 放 网 标 
| | 
AR SN 
€3 
图 13.7 页 面 初始 效果 图 13.8 设置 拖 放 图 标 后 ， 拖 放 时 的 效果 


13.4 小 结 


本 章 主要 介绍 了 文件 API 和 拖 放 API。 在 文件 API 中 主要 介绍 了 FileList 对 象 与 file 对 象 、Blob 
对 象 以 及 FileReader 接口 。 通 过 这 些 文件 的 对 象 和 接口 ， 可 以 实现 文件 的 上 传 与 文件 的 预览 等 操作 。 
在 拖 放 API 中 主要 介绍 了 实现 拖 放 的 步骤 、 为 拖 放 定制 拖 忠 图 标 ， 以 及 对 DataTransfer 对 象 的 属性 与 
方法 的 介绍 。 希 望 读者 能 好 好 理解 和 掌握 文件 API 和 拖 放 API， 因 为 通过 使 用 文件 API 和 拖 放 API， 
对 于 从 Web 页 面 上 访问 本 地 文件 系统 的 相关 处 理 将 会 变 得 十 分 简单 了 。 
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13.5 实 战 


13.5.1 实战 一 : 实现 编辑 照片 墙 中 上 传 图 片 的 功能 


使 用 readAsDataURL 方法 实现 编辑 照片 墙 中 上 传 图 片 的 功能 。( 资源 包 \ 源 码 \13\ 实 战 \01 ) 


13.5.2 ”实战 二 : 查看 网 页 源码 


使 用 readAsText 方法 查看 网 页 源码 功能 。( 资源 包 \ 源 码 \13\ 实 战 \02 ) 


13.5.3 ”实战 三 : 预览 文件 功能 


使 用 拖 放 API 实现 将 文件 从 文件 夹 中 拖 电 至 网 页 中 预览 文件 功能 。( 资源 包 \ 源 码 \13\ 实 战 \03 ) 
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JavaScript 是 基于 对 象 (object-based) 的 语言 ， 本 章 将 对 JavaScript 中 常见 的 
几 种 对 象 进 行 详细 讲解 , 包括 Window 窗口 对 象 、 Document 文档 对 象 、 JavaScript 
与 表单 操作 、DOM 对 象 等 。 

学 习 摘要 : 

站 Window 窗口 对 象 

MW Document 文档 对 象 

Nm JavaScript 与 表单 操作 

WH DOM 对 象 


JavaScript 对 象 编程 
( 名 视频 讲解 : 1 小 时 2 分 钟 ) 


第 14 章 JavaScript 对 象 编程 


14.1 Window 窗口 对 象 


14.1.1 Window 对 象 


Window 对 象 代表 的 是 打开 的 浏览 器 窗口 ,通过 Window 对 象 可 以 控制 窗口 的 大 小 和 位 置 、 由 窗口 
弹出 的 对 话 框 、 打 开 窗 口 与 关闭 窗口 ， 还 可 以 控制 窗口 上 是 否 显示 地 址 栏 、 工 具 栏 和 状态 栏 等 栏目 。 
对 于 窗口 中 的 内 容 ，Window 对 象 可 以 控制 是 否 重 载 网 页 、 返 回 上 一 个 文档 或 前 进 到 下 一 个 文档 。 

在 框架 方面 ，Window 对 象 可 以 处 理 框架 与 框架 之 间 的 关系 ,并 通过 这 种 关系 在 一 个 框架 处 理 另 一 
个 框架 中 的 文档 。Window 对 象 还 是 所 有 其 他 对 象 的 项 级 对 象 , 通过 对 Window 对 象 的 子 对 象 进行 操作 ， 
可 以 实现 更 多 的 动态 效果 。Window 对 象 作为 对 象 的 一 种 ， 也 有 着 其 自己 的 方法 和 属性 。 

1. Window 对 象 的 属性 

顶层 Window 对 象 是 所 有 其 他 子 对 象 的 父 对 象 , 它 出 现在 每 一 个 页 面 上 , 并 且 可 以 在 单个 JavaScript 
应 用 程序 中 被 多 次 使 用 。 

为 了 便于 读者 的 学 习 ， 本 节 将 Window 对 象 中 的 属性 以 表格 的 形式 进行 详细 说 明 。Window 对 象 的 
属性 以 及 说 明 如 表 14.1 所 示 。 


表 14.1 Window 对 象 的 属性 


属 性 描 述 
document 对 话 框 中 显示 的 当前 文档 
frames 表示 当前 对 话 框 中 所 有 frame 对 象 的 集合 
location 指定 当前 文档 的 URL 
name 对 话 框 的 名 字 
status 浏览 器 窗 中 状态 栏 的 当前 显示 信息 
defaultstatus 浏览 器 窗 中 状态 栏 的 默认 显示 信息 
top 表示 最 项 层 的 浏览 器 对 话 框 
parent 表示 包含 当前 对 话 框 的 父 对 话 框 
opener 表示 打开 当前 对 话 框 的 父 对 话 框 
closed 表示 当前 对 话 框 是 否 关闭 的 逻辑 值 
self 表示 当前 对 话 框 
screen 表示 用 户 屏幕 ， 提 供 屏幕 尺寸 、 颜 色 深度 等 信息 
navigator 表示 浏览 器 对 象 ， 用 于 获得 与 浏览 器 相关 的 信息 


2. Window 对 象 的 方法 
除了 属性 之 外 ，Window 对 象 还 拥有 很 多 方法 。Window 对 象 的 方法 以 及 说 明 如 表 14.2 所 示 。 
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表 14.2 Window 对 象 的 方法 


方 法 描 述 
alert(O) 弹出 一 个 警告 对 话 框 
confirm() 在 确认 对 话 框 中 显示 指定 的 字符 串 
promptO 弹出 一 个 提示 对 话 框 
openO 打开 新 浏览 器 对 话 框 并 且 显 示 由 URL 或 名 字 引 用 的 文档 ， 并 设置 创建 对 话 框 的 属性 
close0) 关闭 被 引用 的 对 话 框 
focus0 将 被 引用 的 对 话 框 放 在 所 有 打开 对 话 框 的 前 面 
blur0 将 被 引用 的 对 话 框 放 在 所 有 打开 对 话 框 的 后 面 
scrollTo(x.y) 把 对 话 框 滚动 到 指定 的 坐标 


scrollBy(offsetx.offsety) 按照 指定 的 位 移 量 滚动 对 话 框 


setTimeout(timer) 在 指定 的 毫秒 数 过 后 ， 对 传递 的 表达 式 求 值 
setInterval(interval) 指定 周期 性 执行 代码 

moveTo(x.y) 将 对 话 框 移动 到 指定 坐标 处 
moveBy(offsetx.offsety) 将 对 话 框 移动 到 指定 的 位 移 量 处 
resizeTo(x,y) 设置 对 话 框 的 大 小 

resizeBy(offsetx,offsety) 按照 指定 的 位 移 量 设置 对 话 框 的 大 小 

printO 相当 于 浏览 器 工具 栏 中 的 “打印 ”按钮 
navigate(URIL) 使 用 对 话 框 显示 URL 指定 的 页 面 

status0) 状态 条 ， 位 于 对 话 框 下 部 的 当前 信息 条 
Defaultstatus() 状态 条 ， 位 于 对 话 框 下 部 的 默认 信息 条 


3. Window 对 象 的 使 用 
Window 对 象 可 以 直接 调用 其 方法 和 属性 ， 例 如 : 


01 ”window. 属 性 名 


02 ”window. 方 法 名 (参数 列表 ) 
Window 是 不 需要 使 用 new 运算 符 来 创建 的 对 象 。 因 此 ， 在 使 用 Window 对 象 时 ， 只 要 直接 使 用 
Window 来 引用 Window 对 象 即 可 ， 代 码 如 下 。 


01 ”window.alert(" 字 符 串 "); 
02 ”window.document.write(" 字 符 串 "); 


在 实际 运用 中 ，JavaSctipt 允许 使 用 一 个 字符 串 来 给 窗口 命名 ， 也 可 以 使 用 一 些 关键 字 来 代 蔡 某 些 
特定 的 窗口 。 例 如 ， 使 用 self 代表 当前 窗口 、parent 代表 父 级 窗口 等 。 对 于 这 种 情况 ， 可 以 用 这 些 字 符 
串 来 代表 Window， 代 码 如 下 。 


01 ”parent. 属 性 名 


02 ”parent. 方 法 名 (参数 列表 ) 
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14.1.2 ”对 话 框 (Dialog) 


对 话 框 是 响应 用 户 某 种 需求 而 弹出 的 小 窗口 ， 本 节 将 介绍 几 种 常用 的 对 话 框 : 警告 对 话 框 、 询 问 
回答 对 话 框 及 提示 对 话 框 。 
1. 警告 (Alert) 
在 页 面 显示 时 弹出 警告 对 话 框 主要 是 在 <body> 标 签 中 调用 Window 对 象 的 alert0 方 法 实现 的 , 下 面 
对 该 方法 进行 详细 说 明 。 
利用 Window 对 象 的 alert0 方 法 可 以 弹出 一 个 警告 框 ， 并 且 在 警告 框 内 可 以 显示 提示 字符 串 文本 。 
语法 如 下 。 
01 window.alert(str) 
参数 str 表示 要 在 警告 对 话 框 中 显示 的 提示 字符 串 。 
用 户 可 以 单 击 警告 对 话 框 中 的 “确定 ”按钮 来 关闭 该 警告 对 话 框 。 不 同 浏览 器 的 警告 对 话 框 样式 
可 能 会 有 些 不 同 。 
6 注意 
警告 对 话 框 是 由 当前 运行 的 页 面 弹出 的 ， 在 对 该 对 话 框 进行 处 理 之 前 ， 不 能 对 当前 页 面 进 行 操 
作 ， 并 且 其 后 面 的 代码 也 不 会 被 执行 。 只 有 将 警告 对 话 框 进行 处 理 后 ( 如 单 击 “确定 ”或 者 “关闭 ” 
对 话 框 ) ， 才 可 以 对 当前 页 面 进行 操作 ， 后 面 的 代码 也 才能 继续 执行 。 


人 
NE 说 明 

也 可 以 利用 alert0) 方 法 对 代码 进行 调试 。 当 弄 不 清楚 某 段 代码 执行 到 哪里 ， 或 者 不 知道 当前 变 
量 的 取 值 情况 ， 便 可 以 利用 该 方法 显示 有 用 的 调试 信息 。 


2. 弹出 询问 回答 对 话 框 


Window 对 象 的 confirm0 方 法 用 于 弹出 一 个 询问 回答 为 “是 ”或 “ 否 ” 问 题 的 对 话 框 。 该 对 话 框 中 
包含 有 两 个 按钮 (在 中 文 操作 系统 中 显示 为 “确定 ”和 “取消 ”， 在 英文 操作 系统 中 显示 为 OK 和 Cancel): 
当 用 户 单 击 了 “确定 ”按钮 ， 返 回 值 为 tue; 单 击 “ 取 消 ” 按 钮 ， 返 回 值 为 false。 

语法 如 下 。 

01 window. confirm(question) 


window: Window 对 象 。 

question: 要 在 对 话 框 中 显示 的 纯 文本 。 通 常 ， 应 该 表达 程序 想 要 让 用 户 回答 的 问题 。 
返回 值 : 如 果 用 户 单 击 了 “确定 ”按钮 ， 返 回 值 为 tue; 如 果 用 户 单 击 了 “取消 ”按钮 ， 返 
可 值 为 false。 

3. 提示 (Prompts) 


利用 Window 对 象 的 Prompt0 方 法 可 以 在 浏览 器 窗口 中 弹出 一 个 提示 框 。 与 警告 框 和 确认 框 不 同 ， 


回回 网 
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在 提示 框 中 有 一 个 输入 框 。 当 显示 输入 框 时 ， 在 输入 框 内 显示 提示 字符 串 ， 在 输入 文本 框 显示 默认 文 
本 ， 并 等 待 用 户 输入 。 当 用 户 在 该 输入 框 中 输入 文字 ， 并 单 击 “ 确 定 ”按钮 时 ， 返 回 用 户 输入 的 字符 
串 ; 当 单 击 “ 取 消 ” 按 钮 时 ， 返 回 null 值 。 

语法 如 下 。 


01 window.prompt(str1,str2) 


strl : 为 可 选项 。 表 示 字 符 串 〈String)， 指 定 在 对 话 框 内 要 被 显示 的 信息 。 如 果 忽略 此 参数 ， 
则 将 不 显示 任何 信息 。 
回 str2: 为 可 选项 。 表 示 字 符 串 〈String)， 指 定 对 话 框 内 输入 框 (input) 的 值 (value)。 如 果 忽 
略 此 参数 ， 则 将 被 设置 为 undefined 。 
例 14.01 本 实例 中 使 用 HTML 语法 ， 在 页 面 中 显示 Window 对 象 常用 对 话 框 ， 效 果 如 图 14.1 所 
示 。( 实例 位 置 : 资源 包 \ 源 码 \14\14.01 ) 


车 告 (alert ) 确定 ( comfirm ) 


Li 一下 Ey 


提示 ( prompts ) 综合 对 话 框 


|ix—m | 


图 14.1 Window 对 象 常用 对 话 框 
(1) 创建 一 个 HTML 页 面 ， 引 入 mr-style.css 文件 ， 搭 建 页 面 的 布局 和 样式 ， 关 键 代 码 如 下 。 


01 <IDOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8" /> 

05 <title>JavaScript 数据 类 型 </title> 

06 <!-- 引 入 页 面 样式 文件 --> 

07 <link rel="stylesheet" type="text/css" href="css/mr-style .css"> 
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有 <h2><span> 常 用 对 话 框 </span></h2> 
13 < 上 -这 里 继续 填写 代码 --> 

14 </section> 

15 </div> 

16 </body> 

17 </html> 


(2) 编写 alert 对 话 框 的 展示 代码 ， 用 户 单 击 “ 试 一 下 ”按钮 ， 弹 出 alert 对 话 框 的 内 容 ， 关 键 代 
码 如 下 。 


01 <divclass="mr-box"> 


02 <span class="mr-item"> 警 告 (alert) </span> 
03 <span class="mr-info-first"> 

04 <button type="button" onclick="mr_alert()"> 试 一 下 !</button> 
05 </span> 

06 </div> 

07 <script> 

08 /警告 

09 function mr_alert(){ 

10 window.alert(" 警 告 : 支付 成 功 ! "); 

11 } 

12 </script> 


(3) 编写 confirm 对 话 框 的 展示 代码 ， 用 户 单 击 “ 试 一 下 ”按钮 ， 弹 出 confirm 对 话 框 的 内 容 ， 
关键 代码 如 下 。 


01 <div class="mr-box"> 


02 <span class="mr-item"> 确 定 〈comfirm) </span> 
03 <span class="mr-info"> 

04 <button type="button" onclick="mr_confirm()"> 试 一 下 !</button> 
05 </span> 

06 </div> 

07 <script> 

08 /确定 

09 function mr_confirm(X 

10 window.confirm(" 询 问 : 确定 要 购买 吗 ? "); 

11 } 

12 </script> 


(4) 编写 prompts 对 话 框 的 展示 代码 ， 用 户 单 击 “ 试 一 下 ”按钮 ， 弹 出 prompts 对 话 框 ， 关 键 代 
码 如 下 。 


01 <divclass="mr-box"> 


02 <span class="mr-item"> 提 示 (prompts) </span> 

03 <span class="mr-info"> 

04 <button type="button" onclick="mr_prompts()"> 试 一 下 !</button> 
05 </span> 

06 </div> 

07 <script> 

08 /提示 留言 
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09 function mr_prompts(){ 

10 window.prompt(" 请 输入 你 的 邮寄 地 址 ","); 
11 } 

12 </script> 


(5) 编写 综合 对 话 框 的 展示 代码 ， 用 户 单 击 “ 试 一 下 ”按钮 ， 弹 出 一 系列 对 话 框 的 内 容 ， 关 键 代 
码 如 下 。 


01 <divclass="mr-box"> 


02 <span class="mr-item"> 综 合 对 话 框 </span> 
03 <span class="mr-info"> 

04 <button type="button" onclick="mr_dialog()"> 试 一 下 !</button> 
05 </span> 

06 </div> 

07 <script> 

08 /综合 对 话 框 

09 function mr_dialog(){ 

10 window.confirm(" 询 问 : 确定 要 购买 吗 ? "); 
11 window.prompt(" 请 输入 你 的 邮寄 地 址 ",") 

12 window.alert(" 支 付 成 功 ! ") 

13 } 

14 </script> 


14.1.3 ”窗口 对 象 常用 操作 


1， 移 动 窗口 

下 面 介 绍 几 种 移动 窗口 的 方法 。 

(1) moveTo() 方 法 。 利 用 moveTo0 方 法 可 以 将 窗口 移动 到 指定 坐标 (x,y) 处 。 
语法 如 下 。 
01 window.moveTo(x,y) 


回 x: 窗口 左上 角 的 x 坐标 。 
回 y: 窗口 左上 角 的 y 坐标 。 
例如 ， 将 窗口 移动 到 指定 到 坐标 (300.300) 处 ， 代 码 如 下 。 


01 window.moveTo(300,300) 
oh 
EC 培 明 


moveTo0 方 法 是 Navigator 和 IE 都 支持 的 方法 ， 它 不 属于 W3C 标准 的 DOM. 


(2) resizeTo0 方 法 。 利 用 resizeTo0 方 法 可 以 将 当前 窗口 改变 成 (x,y) 大 小 ，x、y 分 别 为 宽度 和 高 度 。 
语法 如 下 。 


01 window.resizeTo(x,y) 
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回 x: 窗口 的 水 平 宽度 。 
y: 窗口 的 垂直 宽度 。 
例如 ， 将 当前 窗口 改变 成 (300,200) 大 小 ， 代 码 如 下 。 
01 window.moveTo(300,200) 
(3) screen 对 象 。screen 对 象 是 JavaScript 中 的 屏幕 对 象 ， 反 映 了 当前 用 户 的 屏幕 设置 。 该 对 象 的 
常用 属性 如 表 14.3 所 示 。 
表 14.3 screen 对 象 的 常用 属性 


属 性 说 明 
width 用 户 整个 屏幕 的 水 平 尺寸 ， 以 像素 为 单位 
height 用 户 整个 屏幕 的 垂直 尺寸 ， 以 像素 为 单位 


pixelDepth | 显示 器 的 每 个 像素 的 位 数 
返回 当前 颜色 设置 所 用 的 位 数 ，1 代表 黑白 ; 8 代表 256 色 ; 16 代表 增强 色 ; 24/32 代表 真 彩色 。8 位 
colorDepth | 颜色 支持 256 种 颜色 ; 16 位 颜色 (通常 叫 作 “ 增 强 色 ”) 支持 大 概 64000 种 颜色 ; 而 24 位 颜色 (通常 
叫 作 “ 真 彩色 ”) 支持 大 概 1600 万 种 颜色 

availHeight | 返回 窗口 内 容 区 域 的 垂直 尺寸 ， 以 像素 为 单位 

availWidth | 返回 窗口 内 容 区 域 的 水 平 尺寸 ， 以 像素 为 单位 


例如 ， 使 用 screen 对 象 设置 屏幕 属性 ， 代 码 如 下 。 

01 window.screen.width // 屏 幕 宽 度 

02 window.screen.height /屏幕 高 度 

03 window.screen.colorDepth /屏幕 色 深 

04 window.screen.availWidth /可用 宽度 

05 ”window.screen.availHeight /可 用 高 度 〈 除 去 任务 栏 的 高 度 ) 

2. 改变 窗口 大 小 

利用 Window 对 象 的 resizeBy0 方 法 可 以 实现 将 当前 窗口 改变 指定 的 大 小 (x,y)， 当 x、y 的 值 大 于 0 
时 为 扩大 ， 小 于 0 时 为 缩小 。 

语法 如 下 。 

01 window.resizeBy(x,y) 

回 x: 放大 或 缩小 的 水 平 宽度 。 

回 y: 放大 或 缩小 的 垂直 宽度 。 

3. 窗口 滚动 

利用 Window 对 象 的 scroll0 方 法 可 以 指定 窗口 的 当前 位 置 ， 从 而 实现 窗口 滚动 效果 。 

语法 如 下 。 


01 scroll(x,y); 
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回 x: 屏幕 的 横向 坐标 。 

回 y: 屏幕 的 纵向 坐标 。 

Window 对 象 中 有 3 种 方法 可 以 用 来 滚动 窗口 中 的 文档 ， 这 3 种 方法 的 使 用 如 下 。 

01 window.scroll(x,y) 

02 window.scrollTo(x,y) 

03 window.scrollBy(x,y) 

以 上 3 种 方法 的 具体 解释 如 下 。 

回 scroll0: 该 方法 可 以 将 窗口 中 显示 的 文档 滚动 到 指定 的 绝对 位 置 。 滚 动 的 位 置 和 


参数 x 和 y 


决定 ， 其 中 x 为 要 滚动 的 横向 坐标 ，y 为 要 滚动 的 纵向 坐标 。 两 个 坐标 都 是 相对 文档 的 左上 角 


而 言 的 ， 即 文档 的 左上 角 坐 标 为 (0.0)。 
回 scrollTo0: 该 方法 的 作用 与 scroll0 方 法 完全 相同 。scroll0 方 法 是 JavaScript 1.1 9 
而 scrollTo0 方 法 是 JavaScript 1.2 中 所 规定 的 。 建 议 使 用 scrollTo0 方 法 。 


ph 所 规定 的 ， 


回 scrollBy: 该 方法 可 以 将 文档 滚动 到 指定 的 相对 位 置 上 ,参数 x 和 y 是 相对 当前 文档 位 置 的 坐标 。 
如 果 参 数 x 的 值 为 正 数 ， 则 向 右 滚动 文档 ; 如 果 参 数 x 值 为 负数 ， 则 向 左 滚动 文档 。 与 此 类 似 ， 
如 果 参 数 y 的 值 为 正 数 ， 则 向 下 滚动 文档 ;如 果 参 数 y 的 值 为 负数 ， 则 向 上 滚动 文档 。 


4. 访问 窗口 历史 


利用 history 对 象 实现 访问 窗口 历史 ，history 对 象 是 一 个 只 读 的 URL 字符 串 数 组 ， 该 对 象 主要 用 
来 存储 一 个 最 近 所 访问 网 页 的 URL 地 址 的 列表 。 


语法 如 下 。 
01 [window.Jhistory.propertyImethod([parameters]) 
history 对 象 的 常用 属性 以 及 说 明 如 表 14.4 所 示 。 
表 14.4 history 对 象 的 常用 属性 


history 对 象 的 常用 方法 以 及 说 明 如 表 14.5 所 示 。 
表 14.5 history 对象 的 常用 方法 


属 性 描述 

length 历史 列表 的 长 度 ， 用 于 判断 列表 中 的 入 口 数目 
current 当前 文档 的 URL 

next 历史 列表 的 下 一 个 URL 

previous 历史 列表 的 前 一 个 URL 
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方 ” 法 描 述 
back0) 退回 前 一 页 
forward0 重新 进入 下 一 页 
go0 进入 指定 的 网 页 
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例如 ， 利 用 history 对 象 中 的 back0 方 法 和 forward0 方 法 来 引导 用 户 在 页 面 中 跳 转 ， 代 码 如 下 。 

01 <a href="javascript:window.history.forward();">forward</a> 

02 <a href="javascript:window.history.back ();">back</a> 

还 可 以 使 用 history.go0) 方 法 指定 要 访问 的 历史 记录 。 若 参数 为 正 数 ， 则 向 下 移动 ， 比 如 参数 为 1， 
则 向 下 移动 一 步 ， 若 参数 为 负数 ， 则 向 上 移动 ， 比 如 参数 为 -1， 则 向 上 移动 一 步 。 例 如 : 


01 ”<a href="javascriptwindow.history.go(-1);"> 向 上 移动 一 步 </a> 
02 ”<a href="javascript:window.history.go (1):"> 向 下 移动 一 步 /a> 


使 用 history.length 属性 能 够 访问 history 数组 的 长 度 ， 可 以 很 容易 地 转移 到 列表 的 末尾 。 例 如 : 


01 <a href="javascript:window.history.go(window.historylength-1);"> 末 尾 </a> 


5. 控制 窗口 状态 栏 
下 面 介绍 几 种 控制 窗口 状态 栏 的 方法 。 
(1) status0 方 法 。 改 变 状态 栏 中 的 文字 可 以 通过 Window 对 象 的 status0 方 法 实现 。status0 方 法 主 
要 功能 是 设置 或 给 出 浏览 器 窗口 中 状态 栏 的 当前 显示 信息 。 
语法 如 下 。 
01 window.status=str 
(2) defaultstatus() 方 法 。 
语法 如 下 。 
01 window.defaultstatus=str 


status0 方 法 与 defaultstatus0 方 法 的 区 别 在 于 信息 显示 时 间 的 长 短 。defaultstatus0 方 法 的 值 会 在 任何 
时 间 显 示 ， 而 status0 方 法 的 值 只 在 某 个 事件 发 生 的 瞬间 显示 。 


14.2 Document 文档 对 象 


14.2.1 文档 对 象 概 述 


通过 Document 对 象 ， 可 以 轻松 访问 构成 Web 页 面 的 HTML 元 素 ， 如 图 14.2 所 示 。 在 谷歌 浏览 器 
的 开发 者 工具 中 ， 展 开 Document 对 象 后 ， 可 以 获取 当前 页 面 的 HTML 内 容 。Document 对 象 提供 了 一 
些 有 用 的 属性 和 方法 ， 以 便于 检索 任何 HIML 元 素 ， 其 简单 易 用 。 
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芭 癌 | kemens Console Souces Nework Peromance Memory Appl 
Ce 


htm 
<head>~</head 
v <bod 
-hasder>--/header 
Y=main 
p class="bold">This is my sanple </p 
*<form>-=/form 
*<section class="somer>_</section: 


Pp <Toater>-</Tooter 


图 14.2 构成 Web 页 面 的 HIML 元 素 


14.2.2 文档 对 象 的 常用 属性 、 方 法 与 事件 


本 节 将 详细 介绍 文档 对 象 (Document 对 象 ) 常用 的 属性 、 方 法 和 事件 。 
1. Document 对 象 的 常用 属性 


Document 对 象 的 常用 属性 及 说 明 如 表 14.6 所 示 。 
表 14.6 Document 对 象 的 属性 及 说 明 


属 性 说 明 
alinkColor 链接 文字 的 颜色 ， 对 应 于 <body> 标 记 中 的 alink 属性 
al 存储 HIML 标记 的 一 个 数组 〈 该 属性 本 身 也 是 一 个 对 象 ) 
anchors| 存储 锚 点 的 一 个 数组 《该 属性 本 身 也 是 一 个 对 象 ) 
bgColor 文档 的 背景 颜色 ， 对 应 于 <body> 标 记 中 的 bgcolor 属性 
cookie 表示 cookie 的 值 
人 gColor 文档 的 文本 颜色 不 包含 超 链接 的 文字 〉 对 应 于 <body> 标 记 中 的 text 属性 值 
forms| 存储 窗 体 对 象 的 一 个 数组 (该 属性 本 身 也 是 一 个 对 象 ) 
fileCreatedDate 创建 文档 的 日 期 
fileModifiedDate, 文档 最 后 修改 的 日 期 
fileSize 当前 文件 的 大 小 
lastModified 文档 最 后 修改 的 时 间 
images[] 存储 图 像 对 象 的 一 个 数组 该 属性 本 身 也 是 一 个 对 象 ) 
linkColor 未 被 访问 的 链接 文字 的 颜色 ， 对 应 于 <body> 标 记 中 的 link 属性 
links[] 存储 link 对 象 的 一 个 数组 (该 属性 本 身 也 是 一 个 对 象 
VlinkColor 表示 已 访问 的 链接 文字 的 颜色 ， 对 应 于 <body> 标 记 的 vlink 属性 
title 当前 文档 标题 对 象 
body 当前 文档 主体 对 象 
TeadyState 获取 某 个 对 象 的 当前 状态 
URL 获取 或 设置 URL 


2. Document 对 象 的 常用 方法 
Document 对 象 的 常用 方法 和 说 明 如 表 14.7 所 示 。 
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表 14.7 Document 对 象 的 方法 及 说 明 


方 ” 法 说 有明 
close 文档 的 输出 流 
open 打开 一 个 文档 输出 流 并 接收 write 和 writeln 方法 的 创建 页 面 内 容 
write 向 文档 中 写 入 HTML 或 JavaScript 语句 
writeln 向 文档 中 写 入 HTML 或 JavaScript 语句 ， 并 以 换行 符 结束 
createElement 创建 一 个 HTML 标记 
getElementById 获取 指定 id 的 HTML 标记 
3. Document 对 象 的 常用 事件 
多 数 浏览 器 内 部 对 象 都 拥有 很 多 事件 ,下 面 将 以 表格 的 形式 给 出 常用 的 事件 及 何 时 触发 这 些 事件 。 


JavaScript 的 常用 事件 如 表 14.8 所 示 。 


表 14.8 ” ”JavaScript 的 常用 事件 


事件 何 时 触发 

onabort 对 象 载 入 被 中 断 时 触发 

onblur 元 素 或 窗口 本 身 失去 焦点 时 触发 

onchange 改变 <select> 元 素 中 的 选项 或 其 他 表单 元 素 失去 焦点 ， 并 且 在 其 获取 焦点 后 内 容 发 生 过 改变 时 触发 

onclick 单 击 鼠 标 时 触发 。 当 光标 的 焦点 在 按钮 上 ， 并 按 Enter 键 时 ， 也 会 触发 该 事件 

ondblclick 双击 时 触发 

onerror 出 现 错误 时 触发 

onfocus 任何 元 素 或 窗口 本 身 获得 焦点 时 触发 

i 键盘 上 的 按键 (包括 Shif 或 Alt 等 键 ) 被 按 下 时 触发 ， 如 果 一 直 按 着 某 键 ， 则 会 不 断 触发 。 当 返回 
false 时 ， 取 消 默认 动作 

i 键盘 上 的 按键 被 按 下 ， 并 产生 一 个 字符 时 发 生 。 也 就 是 说 ， 当 按 下 Shif 或 Alt 等 键 时 不 触发 。 如 果 
一 直 按 下 某 键 时 ， 会 不 断 触 发 。 当 返回 false 时 ， 取 消 默认 动作 

onkeyup 释放 键盘 上 的 按键 时 触发 

ied 页 面 完全 载 入 后 ， 在 Window 对 象 上 触发 ， 所 有 框架 都 载 入 后 ， 在 框架 集 上 触发 ，<img> 标 记 指定 的 
图 像 完 全 载 入 后 ， 在 其 上 触发 ;或 <objec 亿 标记 指定 的 对 象 完 全 载 入 后 ， 在 其 上 触发 

onmousedown | 单 击 任何 一 个 鼠标 按键 时 触发 

onmousemove | 鼠标 在 某 个 元 素 上 移动 时 持续 触发 

onmouseout 将 鼠标 从 指定 的 元 素 上 移 开 时 触发 

onmouseover | 鼠标 移 到 某 个 元 素 上 时 触发 

onmouseup 释放 任意 一 个 鼠标 按键 时 触发 

onreset 单 击 “ 重 置 ”按钮 时 ， 在 <form> 上 触发 

onresize 窗口 或 框架 的 大 小 发 生 改 变 时 触发 

onscroll 在 任何 带 滚动 条 的 元 素 或 窗口 上 滚动 时 触发 

onselect 选中 文本 时 触发 

onsubmit 单 击 “ 提 交 ” 按 钮 时 ， 在 <form> 上 触发 

onunload 页 面 完全 卸载 后 ， 在 Window 对 象 上 触发 或 者 所 有 框架 都 印 载 后 ， 在 框架 集 上 触发 
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14.2.3 ”Document 对 象 的 应 用 


本 节 主 要 通过 使 用 Document 对 象 的 属性 和 方法 来 演示 一 些 常用 的 实例 , 如 链接 文字 颜色 设置 、 获 
取 并 设置 URL 等 实例 ， 本 章 将 对 Document 对 象 常用 的 应 用 进行 详细 介绍 。 


1. 链接 文字 颜色 设置 


链接 文字 颜色 设置 通过 使 用 alinkColor 属性 、linkColor 属性 和 vlinkColor 属性 来 实现 。 
(1) alinkColor 属性 。 该 属性 用 来 获取 或 设置 当 链接 获得 焦点 时 显示 的 颜色 。 

语法 如 下 。 

01 [color=]document.alinkcolor[=setColon] 


回 setColor: 设置 颜色 的 名 称 或 颜色 的 RGB 值 。setColor 是 可 选项 。 
回 color: 字符 串 变量 ， 用 来 获取 颜色 值 。color 是 可 选项 。 
(2) linkColor 属性 。 该 属性 用 来 获取 或 设置 页 面 中 未 单 击 的 链接 的 颜色 。 
语法 如 下 。 
01 [color=]Jdocument.linkColor[=setColor] 


回 setColor: 设置 颜色 的 名 称 或 颜色 的 RGB 值 。setColor 是 可 选项 。 
回 color: 字符 串 变量 ， 用 来 获取 颜色 值 。color 是 可 选项 。 
(3) vlinkColor 属性 。 该 属性 用 来 获取 或 设置 页 面 中 单 击 过 的 链接 的 颜色 。 
语法 如 下 。 
01 [color=Jdocument.vlinkColor[=setColor] 
回 setColor: 设置 颜色 的 名 称 或 颜色 的 RGB 值 。setColor 是 可 选项 。 
回 color: 字符 串 变 量 ， 用 来 获取 颜色 值 。color 是 可 选项 。 
2. 文档 前 景色 和 背景 色 设置 


文档 前 景色 和 背景 色 的 设置 可 以 使 用 gbColor 属性 和 fgColor 属性 来 实现 。 
(1) bgColor 属性 。 该 属性 用 来 获取 或 设置 页 面 的 背景 颜色 。 
语法 如 下 。 
01 [color=]Jdocument.bgColor[=setColor] 
回 setColor: 设置 颜色 的 名 称 或 颜色 的 RGB 值 。setColor 是 可 选项 。 
回 color: 字符 串 变量 ， 用 来 获取 颜色 值 。color 是 可 选项 。 
(2) feColor 属性 。 该 属性 用 来 获取 或 设置 页 面 的 前 景 颜色 ， 即 为 页 面 中 文字 的 颜色 。 
语法 如 下 。 
01 [color=Jdocument.fgColor[=setColor] 
回 setColor: 设置 颜色 的 名 称 或 颜色 的 RGB 值 。setColor 是 可 选项 。 
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回 color: 字符 串 变量 ， 用 来 获取 颜色 值 。color 是 可 选项 。 

3. 获取 并 设置 URL 

获取 并 设置 URL 主要 可 以 使 用 URL 属性 来 实现 ， 该 属性 是 用 来 获取 或 设置 当前 文档 的 URL。 
语法 如 下 。 

01 [url=]Jdocument.URL[=setUrl] 


回 url: 字符 串 表 达 式 ， 用 来 存储 当前 文档 的 URL。url 是 可 选项 。 
回 setUrl: 字符 串 变 量 ， 用 来 设置 当前 文档 的 URL。setUrl 是 可 选项 。 
4. 在 文档 中 输出 数据 
在 文档 中 输出 数据 可 以 使 用 write 方法 和 writeln 方法 来 实现 。 
(1 ) write 方法 。 该 方法 用 来 向 HTML 文档 中 输出 数据 ,其 数据 包括 字符 串 、 数字 和 HTML 标记 等 。 
语法 如 下 。 
01 document.write(text); 


参数 text 表示 在 HTML 文档 中 输出 的 内 容 。 
(2) writeln 方法 。 该 方法 与 write 方法 作用 相同 , 唯一 的 区 别 在 于 writeln 方法 在 所 输出 的 内 容 后 ， 

添加 了 一 个 回 车 换行 符 。 但 回 车 换行 符 只 有 在 HTML 文档 中 <pre> 和 </pre> 标 记 〈 此 标记 把 文档 中 的 空 
格 、 回 车 、 换 行 等 表现 出 来 ) 内 才能 被 识别 。 

语法 如 下 。 

01 document.writeln(text); 

参数 text 表示 在 HTML 文档 中 输出 的 内 容 。 

5. 获取 文本 框 并 修改 其 内 容 

获取 文本 框 并 修改 其 内 容 可 以 使 用 getElementById0 方 法 来 实现 ,getElementById0 方 法 可 以 通过 指 
定 的 id 来 获取 HTML 标记 ， 并 将 其 返回 。 

语法 如 下 。 

01 sElement=document.getElementByld(id) 


回 ”sElement: 用 来 接收 该 方法 返回 的 一 个 对 象 。 
回 id: 用 来 设置 需要 获取 HIML 标记 的 id 值 。 
例 14.02 本 实例 在 页 面 上 使 用 HTML 语法 ， 讲 解 Document 文档 对 象 ， 效 果 如 图 14.3 所 示 。( 实 
例 位 置 : 资源 包 \ 源 码 \14\14.02 ) 
(1) 创建 一 个 HIML 页 面 ， 引 入 mr-style.css 和 bootstrap.min.css 文件 ， 搭 建 页 面 的 布局 和 样式 ， 
关键 代码 如 下 。 
01 <IDOCTYPE html> 


02 <html> 
03 <head> 
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<meta charset="utf-8"> 
<title>Document 文档 对 象 </title> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="css/mr-style.css"> 
</head> 
<body> 
<div class="zzsc-container"> 
<div class="container mt50"> 
<h1 style="text-align: center">Document 文档 对 象 </h1> 
</div> 
</div> 
</body> 
</html> 


Document 文 档 对 象 


图 14.3 图 解说 明 Document 文档 对 象 


”的 代码 。 用 户 将 鼠标 移动 到 图 片上 时 


， 会 显示 


的 按钮 。 单 击 该 按钮 ， 弹 出 对 应 的 文档 信息 ， 如 页 面 标题 和 页 面 URL 等 ， 效 果 如 图 14.4 所 示 。 


2S2 


获取 文档 信和 


于 Mh 


图 14.4 获取 文档 信息 的 效果 图 


关键 代码 如 下 。 


01 
02 
03 


<div class="col-md-4 col-sm-6"> 
<div class="mr-box"> 
<img src="img/1.png" alt=""> 
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04 <div class="over-layer"> 

05 <h3 class="title"> 获 取 文档 信息 </h3> 

06 <p class="description"> 获 取 页 面 标题 : <button onclick="getTitle():" 
07 style="color:black"> 试 一 下 </button></p> 

08 <p class="description"> 获 取 当 前 域名 : <button onclick="getDomain();" 
09 style="color:black"> 试 一 下 </button></p> 

10 <p class="description"> 获 取 页 面 URL: <button 

11 onclick="getReferrers();" style="color:black"> 试 一 下 </button></p> 
12 </div> 

13 </div> 

14 </div> 

15 <script> 

16 // 获 取 页 面 标题 

# function getTitle(){ 

18 var originalTitle = document.title; 

19 alert(originalTitle); 

20 } 

21 // 获 取 当 前 域名 

F234 function getDomain(X{ 

23 var domain = document.domain; 

24 alert(domain); 

25 } 

26 // 获 取 页 面 URL 

27 function getReferrers(){ 

28 var referrer = document.URL; 

29 alert(referrer); 

30 } 

31 </script> 


(3 ) 编写 Document “查找 文档 元 素 ” 的 代码 。 用 户 将 鼠标 移动 到 图 片上 时 , 会 显示 getElementById0 
和 getElementsBByTagName0) 方 法 的 “ 试 一 下 ”按钮 。 单 击 该 按钮 ， 弹 出 对 应 的 方法 说 明 ， 效 果 如 图 14.5 
所 示 。 


图 14.5 查找 文档 元 素 的 效果 图 


关键 代码 如 下 。 


01 <divclass="col-md-4 col-sm-6"> 
02 <div class="mr-box"> 
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03 <img src="img/2.png" alt=""> 

04 <div class="over-layer"> 

05 <h3 class="title"> 查 找 文档 元 素 </h3> 

06 <p class="description">getElementByld(): <button 

07 onclick="getld();" style="color:black"> 试 一 下 </button></p> 
08 <div id="myDiv" style="display: none">51 购 商 城 </div> 

09 <p class="description">getElementsByTagName(): <button 
10 onclick="getTag();" style="color:black"> 试 一 下 </button></p> 
4 <h1 style="display: none"> 我 是 h1 标签 </h1> 

12 </div> 

13 </div> 

14 </div> 

<script> 

16 /lgetElementByld() 方 法 的 说 阴 

17 function getld(){ 

18 var id_content =' 含 有 id 属性 的 标签 : <div id="myDiv">51 购 商 城 </div>'; 
19 alert(id_content); 

20 var div = document.getElementByld("myDiv"); // 取得 <div> 元 素 的 引用 
21 alert(div.innerHTML); 

22 } 

23 

24 /lgetElementsByTagName() 方 法 的 说 明 

25 function getTag(){ 

26 var tag_content =' 标 签名 : <h1 > 我 是 h1 标签 </h1>'; 

名 7 alert(tag_content); 

28 var h1_content = document.getElementsByTagName("h1"); 

29 alert(h1_content[0].innerHTML); 

30 } 

Ea </script> 


(4) 编写 Document“ 写 入 文档 标签 ”的 代码 。 用 户 将 鼠标 移动 到 图 片上 时 ， 会 显示 “ 试 一 下 ” 
按钮 。 单 击 该 按钮 ， 可 以 设置 文档 的 背景 颜色 、 背 景 图 片 和 文字 大 小 等 内 容 ， 效 果 如 图 14.6 所 示 。 


| 


图 14.6 写 入 文档 标签 的 效果 图 
关键 代码 如 下 。 
01 <divclass="col-md-4 col-sm-6"> 


02 <div class="mr-box"> 


254 


第 14 章 JavaScript 对 象 编程 


03 <img src="img/3.png" alt="™"> 

04 <div class="over-layer"> 

05 <h3 class="title"> 写 入 文档 标签 </h3> 

06 <p class="description"> 设 置 文档 颜色 : <button onclick="setColor();" 
07 style="color:black"> 试 一 下 </button></p> 

08 <p class="description"> 设 置 文字 大 小 : <button onclick="setFontSize();" 
09 style="color:black"> 试 一 下 </button></p> 

10 <p class="description"> 设 置 文档 图 片 : <button onclick="setlmage():” 
i style="color:black"> 试 一 下 </button></p> 

12 </div> 

是 </div> 

14 </div> 

15 <script> 

16 /设置 文档 颜色 

TE function setColor(){ 

18 document.body.style.backgroundColor="red"; 

19 } 

20 /设置 文字 大 小 

21 function setFontSize(){f 

22 document.body.style.fontSize="20px"'; 

23 } 

24 1/ 设置 背景 图 片 

25 function setlImage(){ 

26 document.body.style.backgroundImage="url(img/5.jpg)"; 

27 } 

28 </script> 


14.3 JavaScript 与 表单 操作 


14.3.1 在 JavaScript 中 访问 表单 


在 扫描 检测 与 操作 表单 域 之 前 ， 首 先 应 当 确定 要 访问 的 表单 ，JavaScript 中 主要 有 以 下 3 种 访问 表 
单 的 方式 。 

加 ”通过 document.forms[] 按 编号 访问 。 

加 ”通过 document.forms[] 按 名 称 访问 。 按 照 正规 元 素 检索 机 制 ( 如 使 用 document.formname )。 

回 “在 支持 DOM 的 浏览 器 中 ， 使 用 document.getElementById()。 

例如 ， 对 于 下 面 定义 的 表单 。 

01 <formname="form1" method="post" action="> 

02 ”驱动 器 名 称 : 

03 <input type="text" name="text1"> 

04 &nbsp;&nbsp; 


05 <input type="button" name="Button1" value=" 驱 动 器 类 型 " onclick="dtype(document.form1.text1)"> 
06 </form> 
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可 以 使 用 window.document forms[0]、window.documentforms['forml'] 或 者 window.document forml 


等 方式 来 访问 该 表单 。 
14.3.2 ”在 JavaScript 中 访问 表单 域 


每 个 表单 都 包含 一 个 表单 的 聚集 ， 例 如 ， 要 访问 下 面 的 表单 域 。 


01 <formname="form1" method="post" action="> 

02 ”驱动 器 名 称 : 

03 <input type="text" name="text1"> 

04  &nbsp:&nbsp; 

05 <inputtype="button" name="Button1" value=" 驱 动 器 类 型 " onclick="dtype(document.form1.text1)"> 

06 </form> 

可 以 通过 elements[] 进 行 访问 。 因 此 ， 对 于 前 面 定义 的 表单 ， 可 以 使 用 window.document.forms. 
elements[0] 引 用 第 一 个 域 。 还 可 以 使 用 名 称 访问 表单 域 ，window.document.formstextl 或 者 window. 
document.forms.elements["text1"] 访 问 第 一 个 域 。 


14.3.3 ”表单 的 验证 


验证 表单 中 输入 的 内 容 是 否 符合 要 求 是 JavaScript 常用 的 功能 之 一 。 在 提交 表单 前 进行 表单 验证 ， 
可 以 节约 服务 器 的 处 理 器 周期 ， 为 用 户 节省 等 待 的 时 间 。 

表单 验证 通常 发 生 在 内 容 输 入 结束 ， 表 单 提交 之 前 。 表 单 的 onsubmit 事件 处 理 器 中 有 一 组 函数 负 
责 验证 。 如 果 输 入 中 包含 非法 数据 ， 处 理 器 会 返回 false， 显 示 一 条 信息 ， 同 时 取消 提交 ; 如果 输 入 的 
内 容 合法 ， 则 返回 tue， 提 交 正 常 进行 。 本 节 将 介绍 一 些 表 单 验证 常用 的 技术 。 

例 14.03 ”对 表单 内 容 进行 验证 ， 比 如 ， 邮 箱 格式 是 否 正 确 ， 手机 号 是 否 符合 号 码 格式 等 。 现 在 实 
现 51 购 商 城 注 册 界 面 的 验证 ， 效 果 如 图 14.7 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \13\14.03 ) 


选中 去 示人 癌 训 旋 坊 《服务 协议 》 


14.7 注册 内 容 的 验证 
(1) 创建 一 个 HTML 页 面 ， 引 入 mr-basic.css 和 mr-login.css 文件 ， 搭 建 页 面 的 布局 和 样式 。 


第 14 章 “JavaScript 对象 编程 


(2) 使 用 <form> 标 签 创建 一 个 表单 ， 并 利用 <input> 标 签 的 type 属性 ， 分 别 创建 了 邮箱 账号 、 设 


置 密码 、 


确认 密码 和 手机 号 等 表单 元 素 。 同 时 在 底部 “注册 ”按钮 中 ， 添 加 onclick 属性 ， 并 赋值 为 


mr_verify0， 表 示 验 证 表单 内 容 的 JavaScript 函数 。 关 键 代 码 如 下 。 


01 
02 
03 
04 
05 
06 
07 
08 
09 


<form method="post"> 
<input type="email" name="™" i 


email" placeholder=" 请 输入 邮箱 账号 "> 


<input type="password" name= ="password" placeholder=" 设 置 密码 "> 
<input type="password" name="" id="passwordRepeat" placeholder=" 确 认 密码 "> 
<input type="text" name="" id="tel" placeholder=" 请 输入 手机 号 "> 

</form> 


<input id="reader-me" type="checkbox"> 选中 表示 您 同意 商城 《服务 协议 》 
<input type="submit" onclick="mr_verify()" 
value=" 注 册 " class="mr-btn mr-btn-primary mr-btn-sm mr-fl"> 


(3) 编写 mr_verify0 函 数 的 逻辑 代码 ， 验 证 表单 内 容 ， 如 非 空 验证 和 格式 验证 等 。 首 先 使 用 
Document 对 象 的 getElementById0 方 法 ， 获 取 各 个 表单 内 容 的 对 象 。 然 后 通过 “对 象 .value” 的 方式 进 
行 条 件 判断 ， 当 条 件 满足 时 ， 程 序 继续 进行 ， 否 则 程序 停止 ， 弹 出 提示 信息 。 关 键 代码 如 下 。 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
亿 
13 
14 
15 
16 
缸 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 


<script> 
function mr_verify(X{ 
/获取 表单 对 象 
var email=document.getElementByld("email"); 
var password=document.getElementByld("password"); 
var passwordRepeat=document.getElementByld("passwordRepeat"); 
var tel=document.getElementByld("tel"); 


/验证 项 目 是 否 为 空 

if(email.value===" || emailvalue===null){ 
alert(" 邮 箱 不 能 为 空 !"); 
return; 

} 

if(password.value===" || password.value===null){ 
alert(" 密 码 不 能 为 空 ! "); 
return; 

} 

if(passwordRepeat.value===" || passwordRepeat.value===null){ 
alert(" 确 认 密 码 不 能 为 空 ! "); 
return; 

if(tel.value===" ||tel.value===null){ 
alert(" 手 机 号 码 不 能 为 空 ! "); 
return; 

} 


if(password.value!==passwordRepeat.value \{ 
alert(" 密 码 设置 前 后 不 一 致 !"); 


return; 


, 
// 验 证 邮件 格式 
apos = email.value.indexOf("@") 
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31 dotpos = email.value.lastiIndexOf(".") 
32 if (apos < 1 || dotpos - apos <2){ 
33 alert( "邮箱 格式 错误 ! "); 

34 } 

35 else{ 

36 alert(" 邮 箱 格式 正确 !"); 

37 } 

38 // 验 证 手机 号 格式 

39 if(isNaN(tel.value)}X{ 

40 alert(" 手 机 号 请 输入 数字 ! "); 
41 return; 

42 } 

43 if(tel.value.length!==11X{ 

44 alert(" 手 机 号 是 11 个 数字 ! "); 
45 return; 

46 } 

47 alert(' 注 册 成 功 ! "); 

48 } 


49 </script> 


14.4 DOM 对 象 


14.4.1 DOM 概述 


DOM 是 Document Object Model (文档 对 象 模型 ) 的 缩写 ， 它 是 由 W3C (World Wide Web 委员 会 ) 
定义 的 。 下 面 分 别 介绍 各 个 单词 的 含义 。 

回 ”Document (文档 )。 

创建 一 个 网 页 并 将 该 网 页 添加 到 Web 中 ，DOM 就 会 根据 这 个 网 页 创建 一 个 文档 对 象 。 如 果 没 有 
document (文档)，DOM 也 就 无 从 谈 起 。 

回 Object (对 象 )。 

对 象 是 一 种 独立 的 数据 集合 。 例 如 ， 文 档 对 象 ， 即 是 文档 中 元 素 与 内 容 的 数据 集合 。 与 某 个 特定 
对 象 相 关联 的 变量 被 称 为 这 个 对 象 的 属性 。 可 以 通过 某 个 特定 对 象 去 调用 的 函数 被 称 为 这 个 对 象 的 
方法 。 

回 “Model (模型 )。 

模型 代表 将 文档 对 象 表示 为 树 状 模型 。 在 这 个 树 状 模型 中 ， 网 页 中 的 各 个 元 素 与 内 容 表 现 为 一 个 
个 相互 连接 的 节点 。 

DOM 是 与 浏览 器 或 平台 的 接口 ， 使 其 可 以 访问 页 面 中 的 其 他 标准 组 件 。DOM 解决 了 JavaScript 
与 JScript 之 间 的 冲突 ， 给 开发 者 定义 了 一 个 标准 的 方法 ， 使 他 们 来 访问 站 点 中 的 数据 、 脚 本 和 表现 层 
对 象 。 
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1. DOM 分 层 


文档 对 象 模型 采用 的 分 层 结 构 为 树 形 结构 ， 以 树 节点 的 方式 表示 文档 中 的 各 种 内 容 。 先 以 一 个 简 
单 的 HTML 文档 说 明 一 下 ， 代 码 如 下 。 


01 
02 
03 
04 
05 
06 
07 
08 
09 


<html > 

<head> 
<title> 标 题 内 容 </title> 
</head> 

<body> 
<h3> 三 号 标题 </h3> 
<b> 加 粗 内 容 </b> 
</body> 

</html> 


以 上 文档 可 以 使 用 图 14.8 对 DOM 的 层次 结构 进行 说 明 。 


图 14.8 文档 的 层次 结构 


通过 图 14.8 可 以 看 出 ， 在 文档 对 象 模型 中 ， 每 一 个 对 象 都 可 以 称 为 一 个 节点 “Node)， 下 面 将 介 
绍 一 下 几 种 节点 的 概念 。 


回 
回 


回 


回 


回 


回 


根 节点 : 在 最 顶层 的 <html> 节 点 ， 称 为 是 根 节点 。 

父 节 点 : 一 个 节点 之 上 的 节点 是 该 节点 的 父 节点 (parent)。 例 如 ，<html> 就 是 <head> 和 <body> 
的 父 节 点 ，<head> 就 是 <title> 的 父 节点 
子 节 点 : 位 于 一 个 节点 之 下 的 节点 就 是 该 节点 的 子 节点 。 例 如 ，<head> 和 <body> 就 是 <html> 
的 子 节点 ，<title> 就 是 <head> 的 子 节点 。 

兄弟 节点 : 如 果 多 个 节点 在 同一 个 层次 ， 并 拥有 相同 的 父 节点 ， 这 几 个 节点 就 是 兄弟 节点 
(sibling)。 例 如 ，<head> 和 <body> 就 是 兄弟 节点 ，<he> 和 <b> 就 是 兄弟 节点 。 

后 代 : 一 个 节点 的 子 节点 的 结合 可 以 称 为 是 该 节点 的 后 代 (descendant)。 例 如 , <head> 和 <body> 
就 是 <html> 的 后 代 ，<h3> 和 <b> 就 是 <body> 的 后 代 。 

叶子 节点 : 在 树 形 结构 最 底部 的 节点 称 为 叶子 节点 。 例 如 ,“ 标 题 内 容 ”“3 号 标题 ”“ 加 粗 内 
容 ” 都 是 叶子 节点 。 


在 了 解 节点 后 ， 下 面 将 介绍 文档 模型 中 节点 的 3 种 类 型 。 
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加 ”元 素 节点 : 在 HIML 中 ，<body>、<p>、<a> 等 一 系列 标记 ， 是 这 个 文档 的 元 素 节点 。 元 素 节 
点 组 成 了 文档 模型 的 语义 逻辑 结构 。 

回 ”文本 节点 : 包含 在 元 素 节 点 中 的 内 容 部 分 ， 如 <p> 标 签 中 的 文本 等 。 一 般 情况 下 ， 不 为 空 的 文 
本 节点 都 是 可 见 的 并 呈现 于 浏览 器 中 的 。 

回 “属性 节点 : 元 素 节点 的 属性 ， 如 <a> 标 签 的 href 属性 与 title 属性 等 。 一 般 情 况 下 ， 大 部 分 属性 
节点 都 是 隐藏 在 浏览 器 背后 ， 并 且 是 不 可 见 的 。 属 性 节点 总 是 被 包含 于 元 素 节点 当中 。 


2. DOM 级 别 


W3C 在 1998 年 10 月 标准 化 了 DOM 第 一 级 ， 它 不 仅 定 义 了 基本 的 接口 ， 其 中 包含 了 所 有 HTML 
接口 。 在 2000 年 11 月 标准 化 了 DOM 第 二 级 ， 在 第 二 级 中 不 但 对 核心 的 接口 升级 ， 还 定义 了 使 用 文 
档 事 件 和 CSS 样式 表 的 标准 的 API。Netscape 的 Navigator 6.0 浏览 器 和 Microsoft 的 Internet Explorer 5.0 
浏览 器 ， 都 支持 了 W3C 的 DOM 第 一 级 的 标准 。 目 前 ，Netscape、Firefox (FF 火狐 浏览 器 ) 等 浏览 器 
已 经 支持 DOM 第 二 级 的 标准 ， 但 Internet Explorer (IE) 还 不 完全 支持 DOM 第 二 级 的 标准 。 


14.4.2 ”DOM 对象 节 点 属性 


在 DOM 中 通过 使 用 节点 属性 可 以 对 各 节点 进行 查询 ， 查 询 出 各 节点 的 名 称 、 类 型 、 节 点 值 、 子 
节点 和 兄弟 节点 等 。DOM 常用 的 节点 属性 如 表 14.9 所 示 。 


表 14.9 DOM 常用 的 节点 属性 


属 性 说 明 
nodeName 节点 的 名 称 
nodeValue 节点 的 值 ， 通 常 只 应 用 于 文本 节点 
nodeType 节点 的 类 型 
parentNode 返回 当前 节点 的 父 节点 
childNodes 子 节点 列表 
firstChild 返回 当前 节点 的 第 一 个 子 节点 
lastChild 返回 当前 节点 的 最 后 一 个 子 节点 
previousSibling 返回 当前 节点 的 前 一 个 兄弟 节点 
nextSibling 返回 当前 节点 的 后 一 个 兄弟 节点 
attributes 元 素 的 属性 列表 


1. 访问 指定 节点 


使 用 getElementById 方法 来 访问 指定 id 的 节点 , 并 用 nodeName 属性 、nodeType 属性 和 nodeValue 
属性 来 显示 出 该 节点 的 名 称 、 节 点 类 型 和 节点 的 值 。 


2. 遍历 文档 树 


遍历 文档 树 通过 使 用 parentNode 属性 、firstChild 属性 、lastChild 属性 、previousSibling 属性 和 
nextSibling 属性 来 实现 。 
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14.4.3 ”节点 的 几 种 操作 


1. 节点 的 创建 


回 ”创建 新 节点 : 创建 新 的 节点 先 通过 使 用 文档 对 象 中 的 createElement0 方 法 和 createTextNodeO 
方法 ， 生 成 一 个 新 元 素 ， 并 生成 文本 节点 。 最 后 通过 使 用 appendChild0 方 法 将 创建 的 新 的 子 
节点 添加 到 当前 节点 的 末尾 。 

appendChild() 方 法 将 新 的 子 节点 添加 到 当前 节点 的 末尾 。 

语法 如 下 。 

01 obj.appendChild(newChild) 


参数 newChild 表示 新 的 子 节点 。 

回 ”创建 多 个 节点 : 创建 多 个 节点 通过 使 用 循环 语句 , 利用 createElement0 方 法 和 createTextNode() 
方法 生成 新 元 素 并 生成 文本 节点 。 最 后 通过 使 用 appendChild0 方 法 将 创建 的 新 节点 添加 到 页 
面 上 。 

2. 节点 的 插入 和 追加 


插入 节点 通过 使 用 insertBefore() 方 法 来 实现 。insertBefore() 方 法 将 新 的 子 节点 添加 到 当前 节点 的 
末尾 。 

语法 如 下 。 

01 obj.insertBefore(new,ref) 

回 new: 表示 新 的 子 节点 。 

回 ref: 指定 一 个 节点 ， 在 这 个 节点 前 插入 新 的 子 节点 。 

3. 节点 的 复制 


复制 节点 可 以 使 用 cloneNode() 方 法 来 实现 。cloneNode() 方 法 用 来 复制 节点 。 
语法 如 下 。 
01 obj.cloneNode(deep) 


参数 deep 是 一 个 Boolean 值 ， 表 示 是 否 为 深度 复制 。 深 度 复制 是 将 当前 节点 的 所 有 子 节点 全 部 复 
制 ， 当 值 为 tue 时 表示 深度 复制 ， 当 值 为 false 时 表示 简单 复制 ， 简 单 复制 只 复制 当前 节点 ,不 复制 其 
子 节点 。 


4. 节点 的 删除 与 替换 


回 ”删除 节点 : 删除 节点 通过 使 用 removeChild0 方 法 来 实现 。removeChild() 方 法 用 来 删除 一 个 子 
节点 。 
语法 如 下 。 


01 obj. removeChild(oldChild) 
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参数 oldChild 表示 需要 删除 的 节点 。 

替换 节点 : 替换 节点 可 以 使 用 replaceChild0 方 法 来 实现 。replaceChild0 方 法 用 来 将 旧 的 节点 
蔡 换 成 新 的 节点 。 

语法 如 下 。 

01 obj.replaceChild(new,old) 


> new: 蔡 换 后 的 新 节点 。 
> old: 需要 被 蔡 换 的 旧 节点 。 


14.4.4 ”获取 文档 中 的 指定 元 素 


虽然 通过 遍历 文档 树 中 全 部 节点 的 方法 ， 可 以 找到 文档 中 指定 的 元 素 ， 但 是 这 种 方法 比较 麻烦 ， 
下 面 介绍 两 种 直接 搜索 文档 中 指定 元 素 的 方法 。 


1. 通过 元 素 的 ID 属性 获取 元 素 


使 用 document 对 象 的 getElementsById0 方 法 可 以 通过 元 素 的 ID 属性 获取 元 素 。 例 如 ， 获 取 文 档 
中 JD 属性 为 userId 的 节点 的 代码 如 下 。 


01 document.getElementByld("userld"); 


2. 通过 元 素 的 name 属性 获取 元 素 


使 用 document 对 象 的 getElementsByName() 方 法 可 以 通过 元 素 的 name 属性 获取 元 素 , 通常 用 于 获 
取 表 单元 素 。 与 getElementsById0 方 法 不 同 的 是 ， 使 用 该 方法 的 返回 值 为 一 个 数组 ， 而 不 是 一 个 元 素 。 如 
果 想 通过 name 属性 获取 页 面 中 唯一 的 元 素 ， 可 以 通过 获取 返回 数组 中 下 标 值 为 0 的 元 素 进行 获取 。 例 如 ， 
页 面 中 有 一 组 单 选 按钮 ，name 属性 均 为 keRadio， 要 获取 第 一 个 单 选 按钮 的 值 可 以 使 用 下 面 的 代码 。 

01 input type="text" name="likeRadio" id="radio" value=" 体 育 " /> 

02 <input type="text" name="likeRadio" id="radio" value=" 美 术 " /> 

03 <input type="text" name="likeRadio" id="radio" value=" 文 艺 " /> 

04 <scriptlanguage="javascript"> 

05 alert(document.getElementsByName!("likeRadio")[0].value); 

06 </script> 


例 14.04” 收 货 地 址 的 复制 和 删除 。 网 上 购物 平台 都 需要 用 户 添加 收 货 地 址 ， 收 货 地 址 的 新 建 、 复 
制 和 删除 都 是 常用 功能 ， 效 果 如 图 14.9 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \14\14.04 ) 

(1) 新 建 一 个 HTML 页面， 引入 mr-basic.css、mr-demo.css、mr-cartstyle.css 和 mr-jsstyle.css 文 
件 ， 搭 建 页 面 的 布局 和 样式 。 

(2) 使 用 <ul> 标 签 实现 地 址 栏 内 容 的 布局 。 在 “删除 ” 超 链 接 中 ， 添 加 onclick 属性 ， 属 性 值 为 
delClick(this)， 表 示 删 除 收 货 地 址 的 JavaScript 函数 。 关 键 代 码 如 下 。 


01 <ulid="addressContainer > 
02 <liid="address" class="user-addresslist defaultAddr > 


262 


32 
33 


第 14 章 “JavaScript 对象 编程 


<div class="address-left"> 
<div class="user DefaultAddr > 
<span class="buy-address-detail"> 
<span class="buy-user"> 李 丹 </span> 
<span class="buy-phone">15871145629</span> 
</span> 
</div> 
<div class="default-address DefaultAddr"> 
<span class="buy-line-title buy-line-title-type"> 收 货 地 址 : </span> 
<span class="buy--address-detail"> 
<span class="province"> 吉 林 </span> 省 
<span class="city"> 长 春 </span> 市 
<span class="dist"> 南 关 </span> 区 
<span class="street"> 卫 星 广场 财富 领域 5A16 室 </span> 
</span> 
</span> 
</div> 
<ins class="deftip"> 默 认 地 址 </ins> 
</div> 
<div class="address-right"> 
<a href="../person/address.htmlI"> 
<span class="mr-icon-angle-right mr-icon-lg"></span></a> 
</div> 
<div class="clear"></div> 
<div class="new-addr-btn"> 
<a href="#" class="hidden"> 设 为 默认 </a> 
<span class="new-addr-bar hidden">|</span> 
<a href="javascript:void(0);" onclick="delClick(this);"> 删 除 </a> 
</div> 
</li> 
</ul> 


确认 路 化 地 址 。 于 a 复制 收 货 地 址 


地 月 15871145629 
收入 地址 : 吉林 和 省 
卫星 广 沁 


re@ Ea [sto| 申通 之 前 达 用 十 
选择 支付 方式 


图 14.9 地 址 栏 节点 的 复制 操作 
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(3) 分 别 编 写 复 制 收 货 地 址 和 删除 收 货 地 址 的 JavaScript 逻辑 代码 。 新 建 copyAddress0 函 数 ， 复 
制 收 货 地 址 ， 具 体 代 码 如 下 。 
01 <script> 


02 /复制 收 货 地 址 
03 function copyAddress(){ 


04 var address = document.getElementByld("address"); // 获 得 收 货 地 址 对 象 
05 var addressCopy = address.cloneNode(true); /完全 复制 对 象 

06 var addressContainer = document.getElementByld("addressContainer ); 

07 addressContainer.appendChild(addressCopy); // 父 容器 添加 复制 对 象 
08 } 

09 


10 /删除 收 货 地址 
11 function delClick(obj 


弃 var addressContainer = document.getElementByld("addressContainer ); 

13 var delObj=obj.parentNode.parentNode; // 获 取 父 容器 节点 
14 if(delObj.previousElementSibling===nullX{ // 判 断根 节点 

15 alert( 无 法 删除 ! 至 少 保留 一 个 默认 地 址 ! "); 

16 return; 

17 } 

18 addressContainerremoveChild(delObj); /删除 节点 对 象 
本 

20 </script> 


14.4.5 与 DHTML 相对 应 的 DOM 


我 们 知道 通过 DOM 技术 可 以 取得 网 页 对 象 。 本 节 我 们 将 介绍 另 一 种 获取 网 页 对 象 的 方法 ， 那 就 
是 通过 DHTML 对 象 模型 的 方法 。 使 用 这 种 方法 可 以 不 必 了 解 文档 对 象 模型 的 具体 层次 结构 ， 而 直接 
得 到 网 页 中 所 需 的 对 象 。 通 过 innerHTML、innerText、outerHTML 和 outerText 属性 可 以 很 方便 地 读 取 
和 修改 HTML 元 素 内 容 。 


4 
NC 培 归 
innerHTML 属性 被 多 数 浏 览 器 所 支持 , 而 innerText、 outerHTML 和 outerText 属性 只 有 IE 浏览 
器 才 支 持 。 


1. innerHTML 和 innerText 属性 

innerHTML 属性 声明 了 元 素 含有 的 HTML 文本 ， 不 包括 元 素 本 身 的 开始 标记 和 结束 标记 。 设 置 该 
属性 可 以 用 于 为 指定 的 HTML 文本 替换 元 素 的 内 容 。 

例如 ， 通 过 innerHTML 属性 修改 <div> 标 记 的 内 容 的 代码 如 下 。 


01 <body> 
02 <divid="clock"></div> 
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03 <scriptlanguage="javascript"> 

04 document.getElementByld("clock").innerHTML="2011-<b>07</b>-22"; 

05 </script> 

06 </body> 

innerText 属性 与 innerHTML 属性 的 功能 类 似 ， 只 是 该 属性 只 能 声明 元 素 包 含 的 文本 内 容 ， 即 使 指 
定 的 是 HTML 文本 ， 它 也 会 认为 是 普通 文本 ， 而 原样 输出 。 

使 用 innerHTML 属性 和 innerText 属性 还 可 以 获取 元 素 的 内 容 。 如 果 元 素 只 包含 文本 ， 那 么 
innerHTML 和 innerText 属性 的 返回 值 相 同 。 如 果 元 素 既 包含 文本 ， 又 包含 其 他 元 素 ， 那 么 这 两 个 属性 
的 返回 值 是 不 同 的， 如 表 14.10 所 示 。 


表 14.10 innerHTML 属性 和 innerText 属性 返回 值 的 区 别 
HTML 代码 innerText 属性 
<div> 明 日 科技 <Jdiv> "明日 科技 " 
<div><b> 明 日 科技 <b></div> "明日 科技 " 
<div><font color="red"></font></div> i 


2. outerHTML 和 outerText 属性 


outerHTML 和 outerText 属性 与 innerHTML 和 innerText 属性 类 似 ， 只 是 outerHTML 和 outerText 
属性 蔡 换 的 是 整个 目标 节点 ， 也 就 是 这 两 个 属性 还 对 元 素 本 身 进行 修改 。 
下 面 以 列表 的 形式 给 出 对 于 特定 代码 通过 outerHTML 和 outerText 属性 获取 的 返回 值 ， 如 表 14.11 
所 示 。 
表 14.11 outerHTML 属性 和 outerText 属性 返回 值 的 区 别 


HTML 得 outerText 属性 
< 明日 科技 <div> " 明 晶 科 捷 
<div id="clock">2011-<b>07</b>-22</div> "2011-07-22" 
<div id="clock"><font color="red"></font></div> 


全 0 注 总 
在 使 用 outerHTML 和 outerText 属性 后 ， 原 来 的 元 素 ( 如 <div> 标 记 ) 将 被 替换 成 指定 的 内 容 ， 
这 时 当 使 用 document.getElementByIdO 方 法 查找 原来 的 元 素 (如 <div> 标 记 ) 时 ， 将 发 现 原来 的 元 素 
(如 <div> 标 记 ) 已 经 不 存在 了 。 


14.5 小 结 


本 章 主要 讲解 了 Window 窗口 对 象 、JavaScript 中 的 表单 操作 以 及 DOM 对 象 。 其 中 ，Window 对 
象 代表 打开 的 浏览 器 窗口 ， 需 要 读者 们 熟 记 几 种 常用 的 Window 对 象 的 方法 ， Document 文档 对 象 则 代 
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表 浏 览 器 窗口 中 的 文档 ， 需 要 读者 们 掌握 如 何 动态 获取 和 改变 HIML 中 的 内 容 ; DOM 对 象 中 ， 需 要 
读者 们 掌握 DOM 节点 的 相关 操作 ; 表单 操作 经 常用 于 注册 登录 等 信息 的 验证 。 


14.6 实 战 


实战 一 : 在 页 面 的 指定 位 置 显示 当前 日 期 


使 用 Document 对 象 ， 在 页 面 的 指定 位 置 显示 当前 日 期 。( 资源 包 \ 源 码 \14\ 实 战 \01 ) 
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响应 式 网 页 设计 
( 铝 ' 视频 讲解 ，38 分 钟 ) 


响应 式 网 页 设计 (Responsive Web Design) 指 的 是 ， 网 页 设计 应 根据 设备 环 
境 (屏幕 尺寸 、 屏 幕 定向 、 系 统 平台 等 ) 以 及 用 户 行为 【改变 窗口 大 小 等 ) 进行 相 
应 的 响应 和 调整 。 具 体 的 实现 方式 由 多 方面 组 成 ， 包 括 弹 性 网 格 和 布局 、 图 片 和 
C55 媒体 查询 的 使 用 等 。 无 论 用 户 正在 使 用 台式 电脑 还 是 智能 手机 ， 无 论 异 幕 是 大 
屏 还 是 小 异 ， 网 页 都 应 该 能 自动 响应 式 布局 ， 使 用 不 同 设备 ， 为 用 户 提 供 良 好 使 用 
体验 。 
习 摘 要 : 


学 

WH 概述 

| 像素 和 屏幕 分 辩 牵 
WI 视 口 

由 响应 式 网 页 的 布局 设计 
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15.1 概 述 


响应 式 网 页 设计 是 目前 流行 的 一 种 网 页 设计 形式 , 主要 特色 是 页 面 布局 能 根据 不 同 设备 (平板 电脑 、 
台式 电脑 或 智能 手机 让 内 容 适应 性 的 展示 ， 从 而 让 用 户 在 不 同 设备 中 都 能 够 友好 地 浏览 网 页 内 容 。 


15.1.1 响应 式 网 页 设计 的 概念 


响应 式 设计 针对 PC、iPhone、Android 和 iPad 等 设备 ， 实 现 了 在 智能 手机 和 平板 电脑 等 多 种 智能 
移动 终端 浏览 效果 的 流畅 ， 防 止 页 面 变形 ， 能 够 使 页 面 自动 切换 分 辨 率 、 图 片 尺 寸 及 相关 脚本 功能 等 
以 适应 不 同 设备 ， 并 可 在 不 同 浏览 终端 进行 网 站 数据 的 同步 更 新 ， 可 以 为 不 同 终端 的 用 户 提供 更 加 舒 
适 的 界面 和 更 好 的 用 户 体验 。 界 面 效 果 如 图 15.1 所 示 。 
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图 15.1 主页 界面 (PC 端 和 移动 端 ) 
15.1.2 ”响应 式 网 页 设计 的 优 缺 点 和 技术 原理 


1. 响应 式 网 页 设计 的 优 缺 点 

响应 式 网 页 设计 是 最 近 几 年 流行 的 前 端 技术 。 提 升 用 户 使 用 体验 的 同时 ， 也 有 自身 的 不 足 。 下 面 
简单 介绍 一 下 。 

响应 式 网 页 设计 的 优点 如 下 。 

(1) 对 用 户 友好 。 响 应 式 设计 可 以 向 用 户 提 供 友 好 的 网 页 界面 ， 可 以 适应 几乎 所 有 设备 的 屏幕 。 
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(2) 后 台数 据 库 统 一 。 即 在 电脑 PC 端 编 辑 了 网 站 内 容 后 ， 手 机 和 平板 等 智能 移动 浏览 终端 能 够 


同步 显示 修改 之 后 的 内 容 ， 网 站 数据 的 管理 能 够 更 加 及 时 和 便捷 。 

(3) 方便 维护 。 如 果 开 发 一 个 独立 的 移动 端 网 站 和 PC 端 网 站 ， 无 疑 增加 更 多 的 网 站 维护 工作 。 
但 如 果 只 设计 一 个 响应 式 网 站 ， 维 护 的 成 本 将 会 很 小 。 

响应 式 网 页 设计 的 缺点 如 下 。 


(1) 增加 加 载 时 间 。 在 响应 式 网 页 设计 中 ， 增 加 了 很 多 检测 设备 特性 的 代码 ， 如 设备 的 宽度 、 分 


辨 率 和 设备 类 型 等 内 容 。 同 样 也 增加 了 页 面 读 取代 码 的 加 载 时 间 。 


(2) 开发 时 间 。 比 起 开发 一 个 仅 适 配 PC 端的 网 站 ， 开 发 响应 式 网 站 的 确 是 一 项 耗 时 的 工作 。 因 


为 考虑 设计 的 因素 会 更 多 ， 如 各 个 设备 中 网 页 布局 的 设计 ， 图 片 在 不 同 终端 中 大 小 的 处 理 等 。 
2. 响应 式 网 页 设计 的 技术 原理 
(1) <meta> 标 签 。 位 于 文档 的 头 部 , 不 包含 任何 内 容 , <meta> 标 签 是 对 网 站 发 展 非常 重要 的 标签 


它 可 以 用 于 鉴别 作者 ， 设 定 页 面 格式 ， 标 注 内 容 提要 和 关键 字 ， 以 及 刷新 页 面 等 ， 它 回应 给 浏览 器 一 


些 有 用 的 信息 ， 以 帮助 正确 和 精确 地 显示 网 页 内 容 。 

(2) 使 用 媒体 查询 (也 称 媒介 查询 ) 适 配 对 应 样式 。 通 过 不 同 的 媒体 类 型 和 条 件 定义 样式 表 规 则 
获取 的 值 可 以 设置 设备 的 手持 方向 ， 水 平 还 是 垂直 ， 设 备 的 分 辩 率 等 。 

(3) 使 用 第 三 方 框架 。 比 如 使 用 Bootstrap 框架 ， 更 快捷 地 实现 网 页 的 响应 式 设计 。 


ol 
NE 说明 
Bootstrap 框架 是 基于 HTML5 和 CSS3 开发 的 响应 式 前 端 框架 ， 包 含 了 丰富 的 网 页 组 件 ， 如 下 
拉 菜 单 、 按 钮 组 件 、 下 拉 菜 单 组件 和 导航 组 件 等 。 


15.2 ”像素 和 屏幕 分 辩 率 


响应 式 设计 的 关键 是 适 配 不 同类 型 的 终端 显示 设备 。 在 讲解 响应 式 设计 技术 之 前 ， 应 先 了 解 物理 


设备 中 关于 屏幕 适 配 的 常用 术语 ， 如 像素 、 屏 幕 分 辩 率 、 设 备 像素 (device-width) 和 CSS 像素 (width 
等 ， 有 助 于 理解 响应 式 设计 的 实现 过 程 。 


15.2.1 像素 和 屏幕 分 辩 率 


像素 ， 全 称 为 图 像 元 素 ， 表 示 数 字 图 像 中 的 一 个 最 小 单位 。 像 素 是 尺寸 单位 ， 而 不 是 画 质 单位 。 


> 


对 一 张 数字 图 片 放大 数 倍 ， 会 发 现 图 像 都 是 由 许多 色彩 相近 的 小 方 点 所 组 成 的 。51 购 商城 的 Logo 图 


片 放大 后 ， 效 果 如 图 15.2 所 示 。 


屏幕 分 辨 率 ， 就 是 屏幕 上 显示 的 像素 个 数 。 以 水 平分 辨 率 和 垂直 分 辨 率 来 衡量 大 小 。 屏 幕 分 辩 率 


低 时 (例如 640X480), 在 屏幕 上 显示 的 像素 少 , 但 尺寸 比较 大 ; 屏幕 分 辩 率 高 时 (例如 1600X1200) 
在 屏幕 上 显示 的 像素 多 ， 但 尺寸 比较 小 。 分 辩 率 1600X 1200 的 意思 是 水 平方 向 含有 像素 数 为 1600 个 
垂直 方向 含有 像素 数 为 1200 个 。 屏 幕 尺 寸 一 样 的 情况 下 ， 分 辩 率 越 高 ， 显 示 效 果 就 越 精细 和 细腻 。 了 
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机 屏幕 分 辩 率 的 效果 如 图 15.3 所 示 。 


贡 滞 阅 四 采 


国 


es a ys 
5 证 购 商 城 
图 15.2 51 购 商城 Logo 的 放大 界面 图 15.3 手机 屏幕 分 辩 率 示意 图 


15.2.2 设备 像素 和 CSS 像素 


1. 设备 像素 

设备 像素 是 物理 概念 ， 指 的 是 设备 中 使 用 的 物理 像素 ， 比 如 iPhone 5 的 屏幕 分 辨 率 为 640 像素 xX 
1136 像素 。 衡量 一 个 物理 设备 的 屏幕 分 辩 率 高 低 使 用 ppi, 即 像素 密度 , 表示 每 英寸 所 拥有 的 像素 数目 。 
ppi 的 数值 越 高 ， 代 表 屏 幕 能 以 更 高 的 密度 显示 图 像 。1 英寸 等 于 2.54 厘米 ，iPad 的 宽度 为 9.7 英寸， 
则 可 以 大 致 想象 1 英寸 的 大 小 了 。 表 15.1 列 出 了 常见 机 型 的 设备 参数 信息 。 


表 15.1 常见 机 型 的 设备 参数 


设备 屏幕 大 小 英寸) 屏幕 分 辩 率 〈 像 素 ) 像素 密度 〈ppi) 


MacBook | 133 1280X 800 | 113 
华硕 R405 | 14 1366X768 | 113 
ipad | 97 1024X768 | 132 
iphone 4S | 3.5 960X 640 | 326 
小 米 手机 2 | 43 1280X720 | 342 


1280X 800 
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魅族 MX 


4.7 
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2. CSS 像素 


CSS 像素 是 网 页 编程 的 概念 ， 指 的 是 CSS 样式 代码 中 使 用 的 逻辑 像素 。 在 CSS 规范 中 ， 长 度 单位 
可 以 分 为 两 类 : 绝对 (absolute) 单位 和 相对 (relative) 单位 。 像 素 是 一 个 相对 单位 ， 相 对 的 是 设备 像 
素 (device pixel)。 

设备 像素 和 CSS 像素 的 换算 是 通过 设备 像素 比 来 完成 的 ， 设 备 像素 比 ， 即 缩放 比例 ， 获 得 设备 像 
素 比 后 ， 便 可 得 知 设备 像素 与 CSS 像素 之 间 的 比例 。 当 这 个 比率 为 1:1 时 ， 使 用 1 个 设备 像素 显示 1 
个 CSS 像素 ， 当 这 个 比率 为 2:1 时 ， 使 用 4 个 设备 像素 显示 1 个 CSS 像素 ， 当 这 个 比率 为 3:1 时 ， 使 
用 9 (3*3) 个 设备 像素 显示 1 个 CSS 像素 。 
关于 设计 师 和 前 端 工 程 师 之 间 的 协同 工作 ， 一 般 由 设计 师 按照 设备 像素 为 单位 制作 设计 稿 。 前 端 
工程 师 ， 参 照相 关 的 设备 像素 比 ， 进 行 换算 以 及 编码 。 
DV 

关于 CSS 像素 和 设备 像素 之 间 的 换算 关系 ， 不 是 响应 式 网 页 设计 的 关键 知识 内 容 。 了 解 相 关 
基本 概念 即 可 。 


15.3 视 只 


视 口 (viewport) 和 窗口 《Window) 是 对 应 的 概念 。 视 口 是 与 设备 相关 的 一 个 矩形 区 域 ， 坐 标 单 
位 与 设备 相关 。 在 使 用 代码 布局 时 ， 使 用 的 坐标 总 是 窗口 坐标 ， 而 实际 的 显示 或 输出 设备 却 各 有 自己 
的 坐标 。 


15.3.1 视 口 


1. 桌面 浏览 器 中 的 视 口 


视 口 的 概念 ， 在 桌面 浏览 器 中 ， 等 于 浏览 器 中 Window 窗口 的 概念 。 视 口中 的 像素 指 的 是 CSS 像 
素 , 视 口 大 小 决定 了 页 面 布局 的 可 用 宽度 。 视 口 的 坐标 是 逻辑 坐标 , 与 设备 无 关 。 视 口 的 界面 如 图 15.4 
所 示 。 


2. 移动 浏览 器 中 的 视 口 


移动 浏览 器 中 的 视 口 分 为 可 见 视 口 和 布局 视 口 。 由 于 移动 浏览 器 的 宽度 限制 ， 在 有 限 的 宽度 内 可 
见 部 分 (可 见 视 口 ) 装 不 下 所 有 内 容 布局 视 口 )， 因 此 移动 浏览 器 中 通过 <meta> 标 签 ， 引 入 viewport 
属性 ， 用 来 处 理 可 见 视 口 与 布局 视 口 的 关系 。 引 入 代码 形式 如 下 。 


<meta name="viewport" content="width=device-width, initial-scale=1.0> 
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吃 新 鲜 水 果 ! 
享 健康 生活 ! 


满 59 包 邮 还 减 10 元 


15.4 桌面 浏览 器 中 的 视 口 概念 
15.3.2 视 口 常用 属性 


viewport 属性 表示 设备 屏幕 上 能 用 来 显示 的 网 页 区 域 ， 具 体 而 言 ， 就 是 移动 浏览 器 上 用 来 显示 网 
页 的 区 域 ， 但 viewport 属性 又 不 局 限于 浏览 器 可 视 区 域 的 大 小 ， 它 可 能 比 浏览 器 的 可 视 区 域 要 大 ， 也 
可 能 比 浏览 器 的 可 视 区 域 要 小 。 
表 15.2 常见 设备 上 浏览 器 的 viewport 宽度 


设备 宽度 〈 像 素 ) 
iPhone 980 
iPad 980 
AndroidHTC 980 
Chrome 980 
IE 1024 


<meta> 标 签 中 viewport 属性 首先 是 由 苹果 公司 在 Safari 浏览 器 中 引入 的 ， 目 的 就 是 解决 移动 设备 的 
viewport 问题 。 后 来 安 卓 以 及 各 大 浏览 器 厂商 也 都 纷纷 效仿 ， 引 入 了 对 viewport 属性 的 支持 。 事 实证 明 ， 
viewport 属性 对 于 响应 式 设计 起 了 重要 作用 。 表 15.3 列 出 了 viewport 属性 中 常用 的 属性 值 及 含义 。 


表 15.3 viewport 属性 中 常用 的 属性 值 及 含义 


属 性 值 含义 
width 设 定 布局 视 口 宽度 
height 设 定 布局 视 口 高 度 
initial-scale 设 定 页 面 初始 缩放 比例 (0 一 10) 


第 15 章 ”响应 式 网 页 设计 


属 性 值 


user-scalable 


含义 
设 定 用 户 是 否 可 以 缩放 (yes/no) 
设 定 最 小 缩小 比例 (0 一 10) 
设 定 最 大 放大 比例 (0 一 10) 


minimum-scale 


maximum-scale 


15.3.3 ”媒体 查询 


媒体 查询 可 以 根据 设备 显示 器 的 特性 (如 视 口 宽度 、 屏 幕 比例 和 设备 方向 ) 设 定 CSS 的 样式 。 媒 
体 查询 由 媒体 类 型 和 一 个 或 多 个 检测 媒体 特性 的 条 件 表达 式 组 成 。 媒 体 查 询 中 可 用 于 检测 的 媒体 特性 
有 width、height 和 color 等 。 使 用 媒体 查询 ， 可 以 在 不 改变 页 面 内 容 的 情况 下 ， 为 特定 的 一 些 输出 设 
备 定制 显示 效果 。 

使 用 媒体 查询 的 步骤 如 下 。 

(1) 在 HIML 页 面 <head> 标 签 中 ， 添 加 viewport 属性 的 代码 ， 代 码 如 下 。 


01 <meta name="viewport content="width=device-width, 
02 initial-scale=1,maximum-scale=1,user-scalable=no"/> 


其 中 ， 各 属性 值 表 示 的 含义 如 表 15.4 所 示 。 
表 15.4 viewport 属性 中 常用 的 属性 值 及 含义 


width=device-width 设 定 布局 视 口 宽度 


initial-scale=1 设 定 布局 视 口 高 度 
maximum-scale=] 设 定 页 面 初始 缩放 比例 〈0 一 10) 
user-scalable=no 设 定 用 户 是 否 可 以 缩放 (yes/no) 


(2) 使 用 @media 关键 字 ， 编写 CSS 媒体 查询 代码 。 举 例 说 明 ， 当 设备 屏幕 宽度 在 320px 一 720px 
时 ， 媒 体 查 询 中 设置 body 的 背景 色 background-color 属性 值 为 rrd， 会 覆盖 原来 的 body 背景 色 ; 当 设 
备 屏幕 宽度 小 于 或 等 于 320px 时 ， 媒 体 查询 中 设置 body 背景 色 background-color 属性 值 为 blue， 会 覆 
盖 原 来 的 body 背景 色 ， 代 码 如 下 。 
01 ”A* 当 设备 屏幕 宽度 在 320px 一 720px 时 */ 
02 @media screen and (max-width:720px) and (min-width:320px}{ 


03 body{ 

04 background-color:red; 

05 } 

06 ”A* 当 设备 屏幕 宽度 小 于 或 等 于 320px 时 */ 

07 @media screen and (max-width:320pxj{ 
08 body{ 

09 background-color:blue; 

10 y 

11 } 
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1$.4 ”响应 式 网 页 的 布局 设计 


响应 式 网 页 设计 涉及 具体 的 知识 点 很 多 ， 比 如 图 片 的 响应 式 处 理 、 表 格 的 响应 式 处 理 和 布局 的 响 
应 式 设 计 等 内 容 。 关 于 响应 式 网 页 的 布局 设计 ， 主 要 特色 是 页 面 布局 能 根据 不 同 设备 〈 平 板 电脑 、 台 
式 电脑 和 智能 手机 等 )， 让 内 容 适 应 性 地 展示 ， 从 而 使 用 户 在 不 同 设备 中 都 能 友好 地 浏览 网 页 内 容 。 响 
应 式 页 面 设计 的 效果 如 图 15.5 所 示 。 


图 15.5 ”响应 式 网 页 的 布局 设计 
15.4.1 常用 布局 类 型 
以 网 站 的 列 数 划分 网 页 布局 类 型 ， 可 以 分 成 单列 布局 和 多 列 布局 。 其 中 ， 多 列 布局 又 可 由 均 分 多 
列 布局 和 不 均 分 多 列 布局 组 成 ， 下 面 详细 介绍 。 


1. 单列 布局 


适合 内 容 较 少 的 网 站 布局 ， 一 般 由 项 部 的 Logo 和 菜单 (一 行 )、 中 间 的 内 容 区 一行) 和 底部 的 
网 站 相关 信息 (一 行 )， 共 3 行 组 成 。 单 列 布局 的 效果 如 图 15.6 所 示 。 


单列 


15.6 单列 布局 
2. 均 分 多 列 布局 


列 数 大 于 或 等 于 2 列 的 布局 类 型 。 每 列 宽度 相同 ， 列 与 列 间 距 相同 ， 适 合 商品 或 图 片 的 列表 展示 ， 
效果 如 图 15.7 所 示 。 


> 
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2 列 


均 分 


图 15.7 均 分 多 列 布局 


3. 不 均 分 多 列 布局 
列 数 大 于 等 于 2 列 的 布局 类 型 。 每 列 宽度 不 同 ， 列 与 列 问 距 不 同 ， 适 合 博客 类 文章 内 容 页 面 的 布 
局 ， 一 列 布局 文章 内 容 ， 一 列 布局 广告 链接 等 内 容 ， 效 果 如 图 15.8 所 示 。 


图 15.8 不 均 分 多 列 布局 


15.4.2 布局 的 实现 方式 


不 同 的 布局 设计 ， 有 不 同 的 实现 方式 。 以 页 面 的 宽度 单位 〈 像 素 或 百分比 ) 来 划分 ， 可 以 分 为 单 
- 式 固定 布局 、 响 应 式 固定 布局 和 响应 式 弹性 布局 这 3 种 实现 方式 。 下 面具 体 介绍 。 

1. 单一 式 固定 布局 

以 像素 作为 页 面 的 基本 单位 ， 不 考虑 多 种 设备 屏幕 及 浏览 器 宽度 ， 只 设计 一 套 固定 宽度 的 页 面 布 
局 。 技 术 简单 ， 但 适 配 性 差 。 适 合 在 单一 终端 中 的 网 站 布局 ， 比 如 以 安全 为 首位 的 某 些 政府 机 关 事业 
单位 ， 则 可 以 仅 设计 制作 适 配 指定 浏览 器 和 设备 终端 的 布局 ， 效 果 如 图 15.9 所 示 。 


图 15.9 单一 式 固定 布局 
2. 响应 式 固定 布局 
同样 以 像素 作为 页 面 单位 ， 参 考 主流 设备 尺寸 ， 设 计 几 套 不 同 宽度 的 布局 。 通 过 媒体 查询 技术 识 
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别 不 同 屏幕 或 浏览 器 的 宽度 ， 选 择 符合 条 件 的 宽度 布局 ， 效 果 如 图 15.10 所 示 。 


图 15.10 ”响应 式 固定 布局 
3. 响应 式 弹性 布局 


以 百分比 作为 页 面 的 基本 单位 ， 可 以 适应 一 定 范围 内 所 有 设备 屏幕 及 浏览 器 的 宽度 ， 并 能 完美 利 
用 有 效 空间 展现 最 佳 效 果 ， 效 果 如 图 15.11 所 示 。 


15.11 ”响应 式 弹性 布局 


响应 式 固定 布局 和 响应 式 弹性 布局 都 是 目前 可 被 采用 的 响应 式 布局 方式 。 其 中 响应 式 固定 布局 的 
实现 成 本 最 低 ， 但 拓展 性 比较 差 ， 响应 式 弹性 布局 是 比较 理想 的 响应 式 布局 实现 方式 。 只 是 对 于 不 同 
类 型 的 页 面 排版 布局 实现 响应 式 设计 ， 需 要 采用 不 用 的 实现 方式 。 


15.4.3 ”响应 式 布局 的 设计 与 实现 


对 页 面 进行 响应 式 的 设计 实现 ， 需 要 对 相同 内 容 进行 不 同 宽度 的 布局 设计 ， 通 常 有 两 种 方式 : 桌 
面 PC 端 优先 《〈 即 从 桌面 PC 端 开始 设计 ) 和 移动 端 优先 〈 首 先 从 移动 端 开始 设计 )。 无 论 以 哪 种 方式 
设计 ， 要 兼容 所 有 设备 ， 都 不 可 避免 地 需要 对 内 容 布局 做 一 些 变化 调整 。 有 模块 内 容 不 变 和 模块 内 容 
改变 两 种 方式 ， 下 面 详细 介绍 。 

(1) 模块 内 容 不 变 ， 即 页 面 中 整体 模块 内 容 不 发 生变 化 ， 通 过 调整 模块 的 宽度 ， 可 以 将 模块 内 容 
从 挤 压 调 整 到 拉 伸 ， 从 平 铺 调整 到 换行 ， 效 果 如 图 15.12 所 示 。 

(2) 模块 内 容 改 变 ， 即 页 面 中 整体 模块 内 容 发 生变 化 ， 通 过 媒体 查询 ， 检 测 当前 设备 的 宽度 ， 动 
态 隐藏 或 显示 模块 内 容 ， 增 加 或 减少 模块 的 数量 ， 效 果 如 图 15.13 所 示 。 
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区 间 宽 度 


图 15.12 模块 内 容 不 变 


区 间 帘 度 


图 15.13 ”模块 内 容 改 变 


例 15.01 本 实例 的 响应 式 设计 采用 “模块 内 容 改 变 ” 的 方式 ， 根 据 当 前 设备 的 宽度 ， 动 态 显示 或 
隐藏 相关 模块 的 内 容 。 界 面 效 果 如 图 15.14 所 示 。( 实例 位 置 : 资源 包 \ 源 码 \1S\15.01 ) 
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图 15.14 51 购 商城 登录 页 面 效 果 (PC 端 和 移动 端 ) 
有 具体 实现 步骤 如 下 。 
(1) 添加 视 口 参数 代码 。 在 <head> 标 签 中 ， 添 加 浏览 器 设备 识别 的 视 口 代码 。 设 置 编码 的 CSS 
像素 宽度 width 等 于 设备 像素 宽度 device-width 、initial-scale 缩放 比 等 于 1.0， 代 码 如 下 。 


01 <meta name="viewport" content="width=device-width, 
02 initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
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(2) 在 style.css 文件 中 添加 媒体 查询 CSS 代码 。 以 PC 端 背景 图 片 为 例 ， 通 过 对 样式 类 的 媒体 查 
询 , 默认 宽度 下 , display 属性 值 为 none, 表示 隐藏 背景 图 片 ; 当 查 询 检测 到 最 小 宽度 大 于 或 等 于 1025px 
时 ， 设 置 display 属性 值 为 block， 表 示 显 示 背 景 图 片 。 因 此 背景 图 片 可 以 适应 设备 的 宽度 进而 隐藏 或 


显示 。 


关键 代码 如 下 。 

01 .login-banner-bg{ 

02 display: none; 

03 } 

04 @media screen and (min-width: 1025px){ 
05 背景 */ 

06 .login-banner-bg { 

07 display: block; 

08 float: left; 

09 } 


15.5- 未 结 


本 章 介绍 响应 式 网 页 设计 的 概念 、 优 缺点 和 技术 原理 ， 说 明 移 动 设备 中 容易 混淆 的 概念 (像素 、 
屏幕 分 辨 率 、 设 备 像素 和 CSS 像素 )。 重 点 讲解 响应 式 网 页 设计 的 关键 概念 一 一 视 口 (viewport)， 并 
推荐 了 “模块 内 容 不 变 ” 和 “模块 内 容 改 变 ” 的 常用 响应 式 布局 技巧 。 


15.6 实 战 


实战 一 : 实现 主页 响应 式 实现 


实现 游戏 主题 网 站 的 主页 响应 式 实现 。( 资源 包 \ 源 码 \15\ 实 战 \01 ) 
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响应 式 组 件 
( 路 1 视频 讲解 : 小 时 14 分 钟 ) 


响应 式 组 件 是 什么 意思 呢 ? 组 件 ， 就 是 封装 在 一 起 的 物件 ， 如 服饰 中 的 运动 套 
装 、 饮 食 里 的 套装 礼品 。 响 应 式 组 件 指 的 是 ， 在 响应 式 网 页 设计 中 ， 将 常用 的 页 面 
功能 (如 图 片 集 、 列 表 、 莱 单 和 表格 等 功能 )， 编 码 实 现 后 共同 封装 在 一 起 的 组 件 ， 
从 而 便于 日 后 的 使 用 维护 。 第 15 章 已 经 学 习 了 响应 式 网 页 设计 的 基础 知识 ， 本 章 
将 继续 深入 学 习 响 应 式 组 件 方面 的 内 容 。 

学 习 摘 要 : 

WI 响应 

MW 响应 式 视频 

WI 响应 

WI 响应 
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16.1 响应 式 图 片 


响应 式 图 片 是 响应 式 网 站 中 的 基础 组 件 。 表 面 上 看 似 简单 ， 只 要 把 图 片 元 素 的 宽 高 属性 值 移 除 ， 
然后 设置 max-width 属性 为 100% 即 可 ， 但 实际 上 仍 要 考虑 很 多 因素 ， 比 如 ， 同 一 张 图 片 ， 在 不 同 的 设 
备 中 的 显示 效果 是 否 一 致 ， 图片 本 身 的 放大 和 缩小 问题 等 。 这 里 ， 介 绍 两 种 常见 的 响应 式 图 片 处 理 方 
法 : 使 用 <picture> 标 签 和 使 用 CSS 图 片 。 


16.1.1 方法 1: 使 用 <picture> 标 签 


<picture> 标 签 的 使 用 方法 与 <audio> 标 签 和 <video> 标 签 非常 类 似 。 使 用 <picture> 标 签 不 仅 可 以 适 配 
响应 式 屏幕 的 大 小 ， 还 可 以 根据 屏幕 的 尺寸 调整 图 片 本 身 的 宽 高 。 
语法 格式 如 下 。 


01 <picture> 

02 <source srcset="1.jpg" media="(max-width: 800px)" /> 
03 <img src="2.jpg"> 

04 </picture> 


语法 解释 如 下 。 

<picture> 标 签 又 包含 <source> 标 签 和 <img> 标 签 。 其 中 <source> 标 签 的 功用 ， 可 以 针对 不 同 屏幕 尺 
寸 ， 显 示 不 同 的 图 片 。 上 述 代码 表示 : 当 屏 幕 的 宽度 小 于 800px 时 ， 将 显示 1jpg 图 片 ， 否则， 将 显示 
<img> 标 签 所 代表 的 2.jpg 默认 图 片 。 

例 16.01 本 实例 巧 用 <picture> 标 签 、<source> 标 签 和 <img> 标 签 ， 实 现 根据 不 同 屏幕 宽度 ， 显 示 
不 同 图 片 的 内 容 。 首 先 使 用 <picture> 标 签 ， 将 <source> 标 签 和 <img> 标 签 放 入 <picture> 父 标签 中 。 然 后 
利用 media 属性 ， 将 属性 值 与 屏幕 宽度 进行 比较 : 当 屏 幕 宽度 大 于 800px 时 ， 显 示 big.jpg 图 片 ， 否 则 
将 显示 small.png 图 片 。 具 体 代 码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \16\16.01 ) 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 <!- 指 定 页 面 编码 格式 --> 

05 <meta charset="UTF-8"> 

06 <!- 指 定 页 头 信息 --> 

07 <title><picture> 标 签 的 使 用 </title> 
08 </head> 

09 <body> 

10 <picture> 

| <source srcset="big.jpg" media="(min-width: 800px)"> 
12 <img srcset="small.png"> 

13 </picture> 

14 </body> 

15 </html> 
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PC 端 运 行 效果 如 图 16.1 所 示 。 手 机 端 运行 效果 如 图 16.2 所 示 。 


新 书 上 市 


0 基础 快速 入 站 


会 ， 一 看 就 懂 
Android 项 目 开 发 | 实战 入 门 


图 16.1 PC 端 界面 效果 
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16.2 手机 端 界面 效果 


16.1.2 方法 2: 使 用 CSS 图 片 


所 谓 CSS 图 片 ， 就 是 利用 媒体 查询 的 技术 ,使 用 CSS 中 的 media 关键 字 ， 针对 不 同 的 屏幕 宽度 定 
义 不 同 的 样式 ， 从 而 控制 图 片 的 显示 。 表 16.1 列 出 了 支持 media 关键 字 的 浏览 
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表 16.1 支持 media 关键 字 的 浏览 器 


浏 览 器 版 本 支持 media 关键 字 
Chrome 浏览 器 三 版 本 21 
微软 浏览 器 三 版 本 9 
火狐 浏览 器 三 版 本 3.5 
Safari 浏览 器 宇 版 本 4.0 
语法 格式 如 下 。 
01 @media screen and (min-width: 800px){ 
02 css 样式 代码 
03 } 


语法 说 明 如 下 。 
上 述 代码 表示 ， 当 屏幕 的 宽度 大 于 800px 时 ， 将 应 用 大 括号 内 的 CSS 样式 代码 。 
例 16.02 本 实例 巧 用 媒体 查询 中 的 media 关键 字 , 根据 屏幕 宽度 的 不 同 , 显示 不 同 大 小 的 响应 式 


图 片 。 首 先 编写 HTML 代码 <div class="changImg"></div>， 引 入 CSS 的 样式 类 changImg， 便 于 使 用 媒 
体 查 询 技术 ,然后 在 CSS 代码 中 , 利用 media 关键 字 可 以 调整 屏幕 的 宽度 。 当 屏幕 宽度 大 于 641px 时 ， 
显示 large.jpg 图 片 ， 当 屏幕 宽度 小 于 640px 时 ， 显 示 small.png 图 片 ， 具 体 代 码 如 下 。( 实例 位 置 : 资 
源 包 \ 源 码 \16\16.02 ) 
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01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 <!-- 指 定 页 面 编 码 格式 --> 

05 <meta charset="UTF-8"> 

06 <!-- 指 定 页 头 信息 --> 

07 <title> 使 用 CSS 技术 ， 控 制 响 应 式 图 片 </title> 


08 <style> 

09 /* 当 屏幕 宽度 大 于 641px 时 */ 

10 @media screen and (min-width: 641px) { 
11 .changelmg { 

4 background-image:url(large.jpg); 
13 background-repeat: no-repeat; 
14 height: 440px; 

5 } 

16 } 

到 /* 当 屏幕 宽度 小 于 641px 时 */ 

18 @media screen and (max-width: 640px) { 
19 .changelmg { 

20 background-image:url(small.png); 
| background-repeat: no-repeat; 
22 height: 440px; 

23 

24 二 

25 </style> 
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26 </head> 
27 <body> 
28 <div class="changelmg"></div> 
29 </body> 
30 </html> 


运行 效果 如 图 16.3 (PC 端 ) 和 图 16.4( 手 机 端 》 所 示 。 
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图 16.4 手机 端 界面 效果 
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16.2 ”响应 式 视频 


视频 ， 对 网 站 而 言 ， 已 经 成 为 极其 重要 的 营销 工具 ， 在 响应 式 网 站 中 ， 对 视频 的 处 理 也 是 常见 的 
功能 需求 。 如 同 响应 式 图 片 一 样 ， 响 应 式 视频 的 处 理 也 是 比较 让 人 头疼 的 事情 。 这 不 仅仅 是 关于 视频 
播放 器 的 尺寸 问题 ， 同 样 也 包含 了 视频 播放 器 的 整体 效果 和 体验 问题 。 这 里 将 介绍 两 种 常见 的 响应 式 
视频 处 理 技术 : <meta> 标 签 和 HTML5 手机 播放 器 。 


16.2.1 方法 1: 使 用 <meta> 标 签 


<meta> 标 签 ， 是 HTML 网 页 中 非常 重要 的 一 个 标签 。<meta> 标 签 中 可 以 添加 一 个 描述 HTML 网 
页 文档 的 属性 ， 如 作者 、 日 期 、 关 键 词 等 。 其 中 ， 与 响应 式 网 站 相关 的 是 viewport 属性 ，viewport 属 
性 可 以 规定 网 页 设计 的 宽度 与 实际 屏幕 的 宽度 的 大 小 关系 。 

语法 格式 如 下 。 


01 <meta name="viewport" content="width=device-width, 
02 initial-scale=1,maximum-scale=1,user-scalable=no"/> 


其 中 ， 各 属性 值 表示 的 含义 如 表 16.2 所 示 。 
表 16.2 viewport 属性 中 常用 的 属性 值 及 含义 


width=device-width 设 定 布局 视 口 宽度 


initial-scale=1 表示 页 面 初始 的 缩放 比例 
Iaximum-scale=1 表示 页 面 最 大 的 缩放 比例 
user-scalable=no 设 定 用 户 是 否 可 以 缩放 (yes/no) 


DA 
视 口 的 概念 ， 在 桌面 浏览 器 中 ， 等 于 浏览 器 中 Window 窗口 的 概念 。 视 口中 的 像素 指 的 是 CSS 
像素 ， 视 口 大 小 决定 了 页 面 布局 的 可 用 宽度 。 视 口 的 坐标 是 逻辑 坐标 ， 与 设备 无 关 。 

例 16.03 ”本 实例 巧 用 <meta> 标 签 , 实现 一 个 视频 在 手机 端的 正常 显示 与 播放 。 首 先 使 用 <iframe> 
标签 引入 一 个 测试 视频 , 然后 通过 <meta> 标 签 添加 viewport 属性 ,最 后 设置 属性 值 为 width=device-width 
和 initial-scale=1， 规 定 布局 视 口 宽度 等 于 设备 宽度 ， 页 面 的 缩放 比例 为 1。 具 体 代 码 如 下 。( 实例 位 置 : 
资源 包 \ 源 码 \16\16.03 ) 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 <!- 指 定 页 面 编码 格式 -> 
05 <meta charset="UTF-8"> 
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06 <!- 通 过 <meta> 标 签 ， 使 网 页 宽度 与 设备 宽度 一 致 -> 

07 <meta name="viewport" content="width=device-width,initial-scale=1"> 
08 <!- 指 定 页 头 信息 --> 

09 <title></title> 

10 </head> 

11 <body> 

12 <div align="center"> 

13 <!- 使 用 <iframe> 标 签 ， 引 入 视频 -> 

14 <iframe src="test.mp4" frameborder="0" allowfullscreen></iframe> 
15 </div> 

16 </body> 

17 </html> 


运行 效果 如 图 16.5〈 手 机 端 ) 所 示 。 


图 16.5 手机 端 界面 效果 


16.2.2 方法 2: 使 用 HTML5 手机 播放 器 


使 用 第 三 方 封装 好 的 手机 播放 器 组 件 ， 也 是 实际 开发 中 经 常 采用 的 方法 。 第 三 方 组 件 工 具 ， 通 过 
JavaScript 和 CSS 技术 ,不 仅 完 美 实现 了 视频 的 响应 式 解 决 方案 , 更 大 大 扩展 了 视频 播放 的 功能 ， 如 点 
赞 、 分 享 和 换 肤 等 功能 。 实 际 开发 中 ， 这 样 封装 好 的 手机 播放 器 组 件 很 多 ， 这 里 主要 通过 一 个 实例 ， 
介绍 willesPlay 手机 播放 器 组 件 的 使 用 方法 。 
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例 16.04 本 实例 使 用 第 三 方 组 件 willesPlay， 实 现 了 一 个 好 看 又 好 
三 方 组 件 的 示例 文档 , 引入 必要 的 CSS 和 JavaScript 文件 , 如 willesPlay.css 


的 手机 播放 器 。 首 先 根 据 第 
文件 和 willesPlayjs 文件 等 。 


然后 将 示例 中 的 视频 文件 替换 为 将 要 使 用 的 视频 文件 ， 这 样 ， 一 个 简易 好 用 的 手机 播放 器 就 完成 了 ， 
有 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \16\16.04 ) 

01 <!IDOCTYPE html> 

02 <htmllang="en"> 

03 <head> 

04 <meta charset="utf-8"> 

05 <meta name="viewport" 

06 content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/> 

07 <title>HTML5 手机 播放 器 </title> 

08 <link rel="stylesheet" type="text/css" href="css/reset.css"/> 

09 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 

10 <link rel="stylesheet" type="text/css" href="css/willesPlay.css"/> 

11 <script src="js/jquery.min.js"></script> 

12 <script src="js/willesPlay.js" type="text/javascript" charset="utf-8"></script> 

13 </head> 

14 <body> 

15 <div class="container"> 

16 <div class="row"> 

17 <div class="col-md-12"> 

18 <div id="willesPlay"> 

19 <div class="playHeader"> 

20 <div class="videoName"> 响 应 式 设计 </div> 

21 </div> 

22 <div class="playContent"> 

23 <div class="turnoff > 

24 <ul> 

25 <li><a href="javascript:;" title=" 喜 欢 " 

26 class="glyphicon glyphicon-heart-empty"></a></li> 

27 <li><a href="javascript:;" title=" 关 灯 " 

28 class="btnLight on glyphicon glyphicon-sunglasses"></a></li> 

29 <li><a href="javascript:;" title=" 分 享 " 

30 class="glyphicon glyphicon-share"></a></li> 

31 </ul> 

32 </div> 

33 <video width="100%" height="100%" id="playVideo"> 

34 <source src="test.mp4" type="video/mp4"> 

35 </source> 

36 当前 浏览 器 不 支持 video 直接 播放 ， 点 击 这 里 下 载 视频 : <a href="/"> 下 载 视频 </a></video> 

37 <div class="playTip glyphicon glyphicon-play"></div> 

38 </div> 

39 <div class="playControll"> 

40 <div class="playPause playlcon"></div> 

41 <div class="timebar"><span class="currentTime">0:00:00</span> 

42 <div class="progress"> 

43 <div class="progress-bar progress-bar-danger progress-bar-striped" 

44 role="progressbar" aria-valuemin="0" aria-valuemax="100" 
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style="width: 0%"></div> 
</div> 
<span class="duration">0:00:00</span></div> 
<div class="otherControl"><span 
class="volume glyphicon glyphicon-volume-down"></span> <span 
class="fullScreen glyphicon glyphicon-fullscreen"></span> 
<div class="volumeBar > 
<div class="volumewrap"> 
<div class="progress"> 
<div class="progress-bar progress-bar-danger" 
role="progressbar" aria-valuemin="0" 
aria-valuemax="100" style="width: 8px;height: 40%;"></div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


运行 效果 如 图 16.6( 手 机 端 所 示 。 


图 16.6 手机 端 界面 效果 
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16.3 响应 式 导 航 菜单 


导航 菜单 ， 也 是 网 站 中 必 不 可 少 的 基础 功能 。 大 家 熟知 的 QQ 空间 ， 已 经 将 导航 菜单 封装 成 五 花 
八 门 的 装饰 性 组 件 ， 可 以 进行 虚拟 商品 的 交易 。 在 响应 式 网 站 越 来 越 成 为 一 种 标 配 的 同时 ， 响 应 式 导 
航 菜单 的 实现 方式 也 多 种 多 样 。 这 里 介绍 两 种 常用 的 响应 式 导航 菜单 : CSS3 响应 式 菜单 和 JavaScript 
响应 式 菜单 。 


16.3.1 方法 1: CSS3 响应 式 菜单 


CSS3 响应 式 菜单 ,本 质 上 仍旧 是 使 用 CSS 媒体 查询 中 的 media 关键 字 , 得 到 当前 设备 屏幕 的 宽度 ， 
根据 不 同 的 宽度 , 设置 不 同 的 CSS 样式 代码 ， 从 而 适 配 不 同 设备 的 布局 内 容 。 这 里 通过 一 个 具体 实例 ， 
实现 CSS3 的 响应 式 导 航 菜单 。 

例 16.05 本 实例 巧 用 media 关键 字 ， 实 现 一 则 网 站 首页 菜单 的 响应 式 菜单 ， 具 体 步 骤 如 下 。 

(1) 新 建 一 个 index.html 文件 ， 编 写 HTML 代码 ， 通 过 <ul> 标 签 、<li> 标 签 和 <p> 标 签 等 ， 实 现 
菜单 中 的 文本 内 容 ， 有 具体 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \16\16.05 ) 


01 ”<!- 引 入 背景 图 片 -> 

02 <body style="background-image: url(bg.jpg)"> 
03 ”<h2> 明 日 科技 在 线 学 院 </h2> 

04 ”<!- 导 航 菜单 区 域 -> 

05 <nav class="nav"> 


06 <ul> 

07 <li class="current"><a href="#"> 课 程 </a></li> 
08 <li><a href="#"> 读 书 </a></li> 

09 <li><a href="#"> 社 区 </a></li> 

10 <li><a href="#"> 服 务 中 心 </a></li> 

11 </ul> 

12 </nav> 


13 ”<p> 明 日 学 院 ， 是 吉林 省 明日 科技 有 限 公 司 倾 力 打 造 的 在 线 实用 技能 学 习 平 台 ， 

14 该 平台 于 2016 年 正式 上 线 ， 主 要 为 学 习 者 提供 海量 、 优 质 的 课程 ， 课 程 结构 严谨 ， 
15 用 户 可 以 根据 自身 的 学 习 程度 ， 自 主 安排 学 习 进度 。 

16 我 们 的 宗旨 是 ， 为 编程 学 习 者 提供 一 站 式 服务 ， 培 养 用 户 的 编程 思维 。 

17 </p> 

18 </body> 


(2) 添加 CSS 代码 ， 对 菜单 内 容 进行 样式 控制 。 使 用 media 关键 字 ， 当 检测 设备 的 屏幕 宽度 小 于 
600px 时 ， 调 整 导航 菜单 的 布局 ， 设 置 width 为 180px，position 为 absolute 绝对 布局 ， 使 得 菜单 适 配 移 
动 端的 效果 ， 关 键 代码 如 下 。 

01 @media screen and (max-width: 600px){ 


02 -nav{ 
03 position: relative; 
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04 min-height: 40px; 

05 } 

06 -nav ul{ 

07 width: 180px; 

08 padding: 5px 0; 

09 position: absolute; 

10 top: 0; 

11 left: 0; 

和 border solid 1px #aaa; 
13 border-radius: 5px; 

14 box-shadow: 0 1px 2px rgba(0,0,0,.3); 
梧 小 

16 -navli{ 

17 display: none; /* 隐 藏 所 有 |i 标签 */ 
18 margin: 0; 

19 } 

20 .nav .current { 

21 display: block; /* 显 示 nav 标签 */ 
22 } 

23 -nav af 

24 display: block; 

25 padding: 5px 5px 5px 32px; 
26 text-align: left; 

27 } 

28 .nav .currenta { 

29 background: none; 

30 color: #666; 

31 } 

32 .nav ul:hover { 

33 background-image: none; 
34 background-color #ff; 
35 } 

36 .nav ul:hover li{ 

37 display: block; 

38 margin: 0 0 Spx; 

39 } 

40 .nav.right ul { 

41 left: auto; 

42 right: 0; 

43 } 

44 .nav.center ul { 

45 left: 50%; 

46 margin-left: -90px; 

47 } 

48 } 


运行 效果 如 图 16.7 (PC 端 ) 和 图 16.8 (村 
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明日 科技 在 线 学 院 PC 端 导 航 菜单 


图 16.8 手机 端 界面 效果 


16.3.2 方法 2: JavaScript 响应 式 菜单 


如 同 HTML5 手机 播放 器 一 样 ，JavaScript 响应 式 菜单 ， 同 样 使 用 第 三 方 封装 好 的 响应 式 导 航 菜单 
组 件 responsive-menu。 在 使 用 这 类 组 件 时 ， 需 要 注意 的 是 ， 一 定 要 根据 官方 的 实例 学 习 和 使 用 。 这 里 
通过 一 个 实例 ， 学 习 responsive-menu 响应 式 导航 菜单 组 件 的 方法 。 
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例 16.06 本 实例 巧 用 第 三 方 组 件 responsive-menu， 实 现 一 个 响应 式 导航 菜单 。 首 先 一 定 要 根据 
官方 的 实例 代码 进行 使 用 ， 将 必要 的 CSS 文件 和 JavaScript 文件 引入 ， 如 responsive-menu.css 文件 和 
responsive-menu.js 文件 等 。 然后 蔡 换 掉 HTML 代码 中 的 测试 文字 , 换 成 自己 将 要 使 用 的 菜单 文本 内 容 ， 
如 课程 、 社 区 和 服务 中 心 等 。 这 样 ， 一 个 简便 且 好 用 的 响应 式 菜单 就 完成 了 。( 实例 位 置 : 资源 包 \ 源 
码 \16\16.06 ) 


01 <!IDOCTYPE html> 


02 <html> 

03 <head> 

04 <meta charset="UTF-8"> 

05 <meta name="viewport" content="width=device-width, initial-scale=1"> 
06 <title>JavaScript 响应 式 菜单 </title> 

07 <link href="css/responsive-menu.css" rel="stylesheet"> 

08 <link href="css/styles.css" rel="stylesheet"> 

09 <script src="js/modernizr.min.js" type="text/jjavascript"></script> 

10 <script src="js/modernizr-custom.js" type="text/javascript"></script> 
11 <script src="js/jquery-1.8.3.min.js"></script> 

4 <script src="js/responsive-menu.js" type="text/javascript"></script> 
13 <script> 

14 jQuery(function ($) { 

15 var menu = $(.rm-nav').rMenu({ 

16 minWidth: "960px", 

17 »D; 

18 D); 

19 </script> 

20 </head> 


21 <body style="background-image: url(images/bg.png)"> 
22 <header> 


23 <div class="wrapper"> 

24 <div class="brand"> 

25 <p><a href="#" class="logo"> 了 明日 科技 </a></p> 

26 </div> 

27 <div class="rm-container > 

28 <a class="rm-toggle rm-button rm-nojs" href="#"> 导 航 菜单 </a> 
29 <nav class="rm-nav rm-nojs rm-lighten"> 

30 <ul> 

31 <li><a href="#"> 课 程 </a> 

32 <ul> 

33 <li><a href="#'>Java 从 入 门 到 精通 </a></li> 
34 <li><a href="#">Java 项 目 实战 系列 </a></li> 
35 <li><a href="#">Java 入 门 第 一 季 </a></li> 
36 </ul> 

37 </li> 

38 <li><a href="#"> 读 书 </a> 

39 <ul> 

40 <li><a href="#"> 后 端 开 发 </a></li> 

41 <li><a href="#"> 移 动 端 开发 </la></li> 

42 <li><a href="#"> 数 据 库 开发 </a></li> 
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43 <li><a href="#"> 前 端 开发 </a></li> 
44 <li><a href=" 帮 "> 其 他 </a></li> 

45 </ul> 

46 </li> 

47 <li><a href="#"> 社 区 </a> 

48 <ul> 

49 <li><a href="#">Java 答疑 区 </a></li> 
50 <li><a href=" 帮 "> 官方 公告 </a></li> 

51 <li><a href="#">Android 答疑 区 </a></li> 
52 <li><a hret ">C++ 答 疑 区 </a>< 川 > 
53 <li><a href="#">php 答疑 区 </a></li> 
54 </ul> 

55 </li> 

56 <li><a href="#"> 服 务 中 心 </a> 

Sr <ul> 

58 <li><a href="#">VIP 权益 </a></li> 


"> 课程 需求 </a></li> 
"> 意见 反馈 </a></li> 
"> 学 分 说 明 </a></li> 
62 <li><a href="#"> 代 金 券 </a></li> 
63 </ul> 

64 </li> 

65 </ul> 

66 </nav> 

67 </div> 

68 </div> 

69 </header> 

70 </html> 


运行 效果 如 图 16.9 (PC 端 ) 和 图 16.10( 手 机 端 》 所 示 。 


课程 读书 社区 服务 中 心 


JAVA 从 入 门 到 精通 


JAVA 项 目 实战 系列 


JAVA 入 门 第 一 季 


图 16.9 PC 端 界面 效果 
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图 16.10 手机 端 界面 效果 


16.4 响应 式 表格 


人 

表格 ， 同 样 也 是 网 站 必 不 可 少 的 功能 。 淘 宝 中 的 “我 的 订单 ”页 面 ， 使 用 的 就 是 表格 技术 。 在 响 

应 式 网 站 中 ， 响 应 式 表格 的 实现 方法 也 有 很 多 ， 这 里 介绍 3 种 : 隐藏 表格 中 的 列 、 滚 动 表格 中 的 列 和 
转换 表格 中 的 列 。 


16.4.1 方法 1: 隐藏 表格 中 的 列 


隐藏 表格 中 的 列 ， 是 指 在 移动 端 中 ， 隐 藏 表格 中 不 重要 的 列 ， 从 而 达到 适 配 移动 端的 布局 效果 。 
实现 技术 ， 主 要 是 应 用 CSS 中 媒体 查询 的 media 关键 字 ， 当 检测 为 移动 设备 时 ， 根 据 设 备 的 宽度 ， 将 
不 重要 的 列 ， 设 置 为 display:none。 

例 16.07 本 实例 应 用 CSS 中 的 media 关键 字 ， 实 现 一 则 招聘 信息 表格 的 移动 端 适 配 ， 有 具体 步 又 
如 下 。( 实例 位 置 : 资源 包 \ 源 码 \16\16.07 ) 

(1) 新 建 index.html 文件 ， 在 文件 中 编写 HIML 代码 ， 完 成 PC 端的 表格 内 容 。 首 先 使 用 <table> 
标签 ， 创 建 一 个 表格 框架 ， 然 后 利用 <tr> 标 签 和 <td> 标 签 ， 完 成 表格 的 行 和 单元 格 的 内 容 ， 具 体 代 码 
如 下 。 
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01 <body style="background-image: url(bg.png);color: #fff"> 
02 ”<h1 align="center"> 招 聘 信 息 </h1> 
03 <table width="100%" cellspacing="1" cellpadding="5" border="1"> 


04 <thead> 

05 <tr> 

06 <th> 序 号 </th> 

07 <th> 职 位 名 称 </th> 
08 <th> 招 聘 人 数 </th> 
09 <th> 工 作 地 点 </th> 
10 <th> 学 历 要 求 </th> 
11 <th> 年 龄 要 求 </th> 
12 <th> 薪 资 </th> 

13 </tr> 

14 </thead> 

15 <tbody align="center"> 
16 <tr> 

17 <td>1</td> 

18 <td>Java 高 级 工程 师 </td> 
19 <td>1</td> 

20 <td> 北 京 </td> 

21 <td> 本 科 </td> 

22 <td>30 岁 以 上 </td> 
3 <td> 面 议 </td> 

24 </tr> 

25: <tr> 

26 <td>2</td> 

27 <td>Java 初级 工程 师 </td> 
28 <td>3</td> 

29 <td> 长 春 </td> 

30 <td> 本 科 </td> 

31 <td>25 岁 以 上 </td> 
32 <td> 面 议 </td> 

33 </tr> 


34 <!- 省 略 部 分 代码 --> 
35 </tbody> 

36 </table> 

37 </body> 


运行 效果 如 图 16.11 (PC 端 ) 所 示 。 

(2) 添加 CSS 代码 ， 改 变 移动 端的 表格 样式 。 首 先 使 用 media 关键 字 ， 检 测 移动 设备 的 宽度 ， 当 
宽度 大 于 640px 且 小 于 800px 时 ， 使 用 选择 器 table td:nth-child(4)， 表 示 表 格 中 的 第 4 列 ， 添 加 隐藏 样 
式 display: none， 便 隐藏 了 第 四 信息 列 。 当 宽度 小 于 640px 时 ， 采 用 同样 的 方法 ， 可 以 隐藏 不 重要 的 信 
息 列 ， 有 具体 代码 如 下 。 


01 <style> 

02 @media only screen and (max-width: 800px) { 
03 table td:nth-child(4), 

04 table th:nth-child(4) {display: none;} 
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05 Di 

06 @media only screen and (max-width: 640px) { 
07 table td:nth-child(4), 

08 table th:nth-child(4), 

09 table td:nth-child(6), 

10 table th:nth-child(6)， 

lk | table td:nth-child(8), 

12 th:nth-child(8){display: none;} 

13 

14 </style> 


运行 效果 如 图 16.12 〈 手 机 端 ) 所 示 。 


招聘 信息 


招聘 
人 数 


职位 名 称 


Java 高 级 工程 师 


招聘 信息 


招聘 人 数 工作 地 点 
北京 议 3 ”前端 UI 设 计 师 


2 ”Java 初 级 工程 师 


325 以 上 PHP 高 级 工程 师 


30WLE: 
23 央 以 上 
测试 工程 师 3 28 岁 以 | 
高 级 用 户 研究 经 理 
高 级 Android 开 发 工程 师 


产品 经 理 


测试 工程 师 


瑞 避 过 加 过 性 ;内 凤 : 闫 蒜 :: 洋 避 驱 冉 


图 16.11 PC 端 界 面 效果 图 16.12 手机 端 界面 效果 
16.4.2 方法 2: 滚动 表格 中 的 列 


滚动 表格 中 的 列 ， 是 指 采 用 滚动 条 的 方式 ， 将 手机 端 看 不 到 的 信息 列 进行 滚动 查看 。 实 现 技术 ， 
使 用 CSS 中 媒体 查询 的 media 关键 字 ， 检 测 屏幕 的 宽度 ， 同 时 ， 改 变 表格 的 样式 ， 将 表格 的 表 头 从 横 
向 排列 变 成 纵向 排列 。 

例 16.08 ”本 实例 仍 在 例 16.07 的 基础 上 ， 不 改变 HTML 代码 ， 实 现 滚动 查看 信息 列 的 移动 端 适 
配 。 首 先 HTML 代码 的 部 分 不 变 ， 仅 替换 背景 图 bg png 即 可 。 然 后 改变 CSS 的 样式 代码 ， 对 选择 器 
table、thead 和 td 等 重新 进行 样式 调整 ， 关 键 代码 如 下 。( 实例 位 置 : 资源 包 \ 源 码 \16\16.08 ) 


01 <style> 
02 @media only screen and (max-width: 800px) { 


22 


运 


/ Armia 
© | © locahost61342/0: 


} 
</style> 
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*first-child+html .cf { zoom: 1; } 

table { width: 100%; border-collapse: collapse; border-spacing: 0; } 

th, 

td { margin: 0; vertical-align: top; } 

th { text-align: left; } 

table { display: block:; position: relative; width: 100%; } 

thead { display: block; float: left; } 

tbody { display: block; width: auto; position: relative; 
overflow-x: auto; white-space: nowrap; } 

thead tr { display: block; } 

th { display: block; text-align: right; } 

tbody tr { display: inline-block; vertical-align: top; } 

td { display: block; min-height: 1.25em; text-align: left; } 

th { border-bottom: 0; border-left: 0; } 

td { border-left: 0; border-right: 0; border-bottom: 0; } 

tbody tr { border-left: 1px solid #babcbf } 

th:last-child, 

td:last-child { border-bottom: 1px solid #babcbf; } 


了 效果 如 图 16.13 (PC 端 ) 和 图 16.14 (手机 端 所 示 。 


图 16.13 PC 端 界 面 效果 图 16.14 手机 端 界 面 效果 
16.4.3 ”方法 3: 转换 表格 中 的 列 


转换 表格 中 的 列 ， 是 指 在 移动 端 中 ， 彻 底 改 变 表格 的 样式 ， 使 其 不 再 有 表格 的 形态 ， 以 列表 的 样 
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式 进行 展示 。 实 现 技 术 ， 仍 使 用 CSS 媒体 查询 中 的 media 关键 字 ， 检 测 屏幕 的 宽度 ， 然 后 利用 CSS 技 
术 ， 重 新 改造 ， 让 表格 变 成 列表 ，CSS 的 神奇 强大 功能 在 这 里 得 以 体现 。 

例 16.09 ”本 实例 在 例 16.08 的 基础 上 ， 不 改变 HTML 代码 ， 实 现 一 则 表格 变 成 列表 的 招聘 信息 
移动 端 适 配 。 首 先 不 改变 HTML 代码 ， 可 以 蔡 换 一 下 背景 图 片 bg.png， 然 后 重新 编写 CSS 代码 ， 使 用 
media 关键 字 , 将 CSS 中 的 标签 选择 器 table、 tr 和 td 等 ,重新 改变 成 列表 的 样式 ， 关键 代 码 如 下 。( 实 
例 位 置 : 资源 包 \ 源 码 \16\16.09 ) 


01 <style> 

02 @media only screen and (max-width: 800px) { 
03 /* 强制 表格 为 块 状 布局 */ 

04 table, thead, tbody, th, td, tr { 
05 display: block; 

06 } 

07 /* 隐藏 表格 头 部 信息 */ 

08 thead tr { 

09 position: absolute; 

10 top: -9999px; 

11 left: -9999px; 

12 Ln 

13 tr { border: 1px solid #ccc; } 
14 td{ 

15 六 显示 列 */ 

16 border: none; 

Wj border-bottom: 1px solid #eee; 
18 position: relative; 

19 padding-left: 50%; 

20 white-space: normal; 

24 text-align: left; 

22 } 

23 td:before { 

24 position: absolute; 

25 top: 6px; 

26 left: 6px; 

27 width: 45%; 

28 padding-right: 10px; 

29 white-space: nowrap; 

30 text-align: left; 

3 font-weight: bold; 

32 } 

33 /显示 数据 

34 td:before { content: attr(data-title); } 
35 } 

36 </style> 


运行 效果 如 图 16.15 (PC 端 和 图 16.16( 手 机 端 所 示 。 
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招聘 信息 


职位 名 称 招聘 人 数 。 工作 地 点 | ”学历 要 或 
Java 高 级 工程 师 掠 提 
到 长 春 本 
长 看 本 科 
本 科 l 
4 本 长 春 
Se A 
科 
高 级 Android 开 发 工程 所 加 本 科 


Java 初 级 工程 是 


SA 


图 1615 PC 端 界面 效果 图 16.16 手机 端 界面 效果 
16.5 小 结 


本 章 继续 深入 讲解 了 响应 式 组 件 方面 的 内 容 。 响 应 式 图 片 ， 介 绍 了 <picture> 标 签 和 CSS 响应 式 图 
片 的 使 用 方法 ， 响 应 式 视频 ， 讲 解 了 <meta> 标 签 和 HIMLS 手机 播放 器 的 使 用 技巧 ， 响 应 式 导航 菜单 ， 
解释 了 CSS3 响应 式 菜单 和 JavaScript 响应 式 菜单 的 区 别 和 联系 ; 响应 式 表 格 , 说 明了 隐藏 表格 中 的 列 、 
滚动 表格 中 的 列 和 转换 表格 中 的 列 的 使 用 法 则 。 通 过 学 习 本 章 的 内 容 ， 相 信 读 者 关于 响应 式 方面 的 知 
识 会 有 更 深入 的 了 解 和 掌握 。 


16.6 实 战 


实战 一 : 实现 一 个 响应 式 菜单 


请 试 着 利用 JavaScript 响应 式 菜单 技术 ， 对 子 菜单 “新 闻 、 图 片 、 视 频 、 社 区 ”实现 响应 式 布局 。 
(资源 包 \ 源 码 \16\ 实 战 \01) 
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项 目 篇 


| 第 17 章 课程 设计 一 一 游戏 公园 


本 篇 通过 制作 一 个 “游戏 公园 ”主题 的 网 站 ， 运 用 软件 工程 的 设计 思想 ， 让 读者 
学 习 如 何 进 行 软件 项 目的 实践 开发 。 书 中 按照 “需求 分 析 一 系统 设计 一 主页 实现 一 博 
客 列 表 实 现 一 博客 详情 实现 一 关于 我 们 ”的 流程 进行 介绍 ， 带 领 读 者 亲身 体验 开发 
项 目的 全 过 程 。 


s/s 


课程 设计 一 一 游戏 公园 
( 锅 ' 视频 讲解 ,1 小 时 5 分 钟 ) 


如 今 的 互联 网 时 代 ， 很 多 人 都 喜欢 玩 电子 游戏 。 电 子 游 戏 种 类 众多 ， 如 熟知 的 
主机 游戏 、 电 脑 游戏 和 手机 游戏 等 ， 种 类 繁多 ， 有 眼花 缘 乱 。 本 章 将 以 电子 游戏 为 类 
型 主题 ， 设 计 并 制作 一 个 电子 游戏 资讯 网 站 一 游戏 公园 。 循 序 渐进 ， 由 简 入 难 ， 
帮助 学 习 人 员 和 逐步 了 解 和 掌 提 网 站 制作 的 全 部 流程 细节 。 

学 习 摘 要 : 


ed 


了 解 网 站 设计 制作 流程 

掌握 轮 揪 图 的 实现 原理 

掌握 九 官 格 布局 的 技巧 

掌握 表单 应 用 的 具体 方法 

掌 栓 实现 CSS3 动画 特效 的 方法 
掌握 JavaScript 控制 页 面 样式 的 能 力 


第 17 章 课程 设计 一 一 游戏 公园 


17.1 课程 设计 目的 


本 课程 设计 和 制作 一 个 游戏 资讯 网 站 一 一 游戏 公园 。 通 过 整个 设计 制作 过 程 ， 旨 在 帮 
全 面 了 解 网 站 制作 流程 ， 熟 练 应 用 HIML 相关 技术 ， 为 今后 真正 的 网 站 制作 呐 定 基础 。 游 戏 公园 网 站 


的 界面 效果 如 图 17.1 所 示 。 


推荐 游戏 


图 17.1 游戏 公园 主页 效果 


17.2 ”游戏 公园 网 站 概述 


“ 工 欲 善 其 事 ， 必 先 利 其 器 ”。 设 计 一 个 网 站 ， 应 根据 网 站 的 主题 内 容 对 号 入 座 ， 合 理 设计 。 比 如 
网 站 的 色彩 元 素 ， 使 用 不 同 的 色调 则 表达 不 同 的 情感 ， 因 此 许多 银行 或 政府 的 官网 都 喜欢 使 用 冷静 的 
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蓝 色 ， 表 现 严肃 和 和 典雅。 下面 介绍 游戏 公园 网 站 的 主题 特点 和 功能 结构 。 
17.2.1 网 站 特点 


游戏 公园 网 站 (以 下 简称 “游戏 公园 ”) 是 一 个 专业 介绍 游戏 资讯 的 网 站 平台 。 游 戏 公 园 坚持 用 户 
第 一 ， 以 用 户 体验 为 核心 ， 免 费 为 用 户 提供 各 种 趣味 和 健康 的 游戏 资讯 。 以 上 内 容 是 游戏 公园 的 主题 
特点 和 功能 需求 。 

根据 提出 的 需求 ， 游 戏 公园 设计 了 主页 、 博 客 列 表 、 博 客 详情 和 关于 我 们 4 个 页 面 。 主 题 颜色 以 
黑色 和 粉色 为 主要 背景 色 ， 黑 色 表达 神秘 和 炫 酷 ， 粉 色 则 表现 年 轻 和 青春 。 游 戏 公 园 的 主要 界面 效果 
如 图 17.2 和 图 17.3 所 示 。 
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图 17.3 游戏 公园 博客 列表 页 面 效 果 
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17.2.2 ”功能 结构 游戏 公园 | 
从 功能 上 划分 ， 游 戏 公园 分 为 主页 、 博 客 和 关于 一 一 一 ”一 一 一 一 一 一 
我 们 这 3 个 功能 。 | 主页 | | 博客 | | 关于 我 们 | 
加 ”主页 功能 : 设计 了 “推荐 游戏 ”和 “最 新 游 。” ”一 一 | 
戏 ”两 个 子 功能 ， 为 用 户 推荐 和 介绍 最 新 的 。 “| | 
游戏 资讯 。 推 | | 最 | | 博 | | 博 
回 博客 功能 : 分 成 “博客 列表 ”和 “博客 详情 ” | 茵 部 | 倘 | | 各 
两 个 子 功能 ,方便 用 户 查找 和 浏览 游戏 资讯 。 戏 | | 戏 | | 表 | | 情 


) 


回 ”关于 我 们 : 介绍 游戏 公园 网 站 的 发 展 历史 和 I [| 


网 站 特点 等 。 S 
游戏 公园 的 功能 结构 图 如 图 17.4 所 示 。 ny NA 


17.3 主页 的 设计 与 实现 


17.3.1 主页 的 设计 


主页 对 一 个 网 站 非常 重要 。 用 户 进入 一 个 网 站 ， 首 先 浏览 的 页 面 就 是 主页 。 主 页 设计 的 好 与 坏 ， 
直接 关系 到 用 户 是 否 有 兴趣 浏览 其 他 页 面 。 因 此 ， 游 戏 公 园 的 主页 特别 设计 了 推荐 游戏 和 最 新 游戏 两 
个 功能 ， 为 用 户 介绍 最 新 最 好 的 游戏 资讯 。 主 页 的 界面 效果 如 图 17.5 和 图 17.6 所 示 。 
游戏 


推荐 游戏 区 域 


17.5 主页 的 顶部 区 域 和 推荐 游戏 区 域 
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图 17.6 主页 的 最 新 游戏 区 域 和 底部 区 域 
17.3.2 ”顶部 区 和 底部 区 功能 的 实现 


根据 由 简 到 繁 的 原则 ， 首 先 实现 项 部 区 和 底部 区 的 功能 。 顶 部 区 由 网 站 的 LOGO 图 片 和 菜单 栏 组 
成 ， 方 便 用 户 跳 转 到 其 他 页 面 。 底 部 区 由 制作 eg 链接 到 技术 支持 的 官网 。 功 能 实现 
后 的 界面 如 图 17.7 所 示 。 


关于 我 们 


图 17.7 主页 的 顶部 区 和 底部 区 
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具体 实现 的 步骤 如 下 。 


(1) 新 建 一 个 HIML 文件 ， 命 名 为 index.html。 引 入 bootstrap.css 文件 和 style.css 文件 ， 构 建 


b= 


面 整体 布局 ， 关 键 代码 如 下 。 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
| 
4 


<!IDOCTYPE html> 

<html> 

<head> 

<title> 首 页 -游戏 公园 </title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> 
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 
</head> 

<body> 

</body> 

</html> 


(2) 实现 顶部 区 的 功能 。 首 先 通过 <img> 标 签 ， 引 入 网 站 的 LOGO 图 片 menu.png。 然 后 使 用 <ul> 
标签 和 <li> 标 签 ， 实 现 菜单 栏 的 布局 。 最 后 通过 <a> 标 签 ， 添 加 href 属性 ,链接 到 其 他 页 面 ， 代 码 如 下 。 


01 
02 
03 
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<div class="header" > 
<div class="header-top"> 
<div class="container"> 
<div class="head-top"> 
<div class="logo"> 
<h1><a href="index.html"> 游戏 <span> 公 
</div> 
<div class="top-nav"> 
<!-- 引 入 网 站 LOGO 图 片 -> 
<span class="menu"><img src="images/menu.png"> </span> 
<!- 顶 部 菜单 栏 -> 
<ul> 
<liclass="active"><a href="index.html"> 主 页 </a></li> 
<li><a ”href="blog.htmI"> 博 客 </a></li> 
<li><a ”href="about.htmI" > 关于 我 们 </a></li> 
<div class="clearfix"> </div> 


</ul> 
</div> 
<div class="clearfix"> </div> 
</div> 
</div> 
</div> 


</div> 


(3) 实现 底部 区 的 功能 。 首 先 通过 <ul> 标 签 和 <li> 标 签 ， 实 现 底部 的 导航 栏 。 然 后 为 <a> 标 签 添加 
href 属性 ， 链 接 到 其 他 页 面 。 最 后 使 用 <p> 段 落 标签 ， 显 示 网 站 的 制作 公司 信息 ， 代 码 如 下 。 


01 
02 


<div class="footer"> 
<div class="container"> 
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03 <ul class="footer-grid"> 

04 <liclass="active"><a href="index.html"> 主 页 </a></li> 

05 <li><a ”href="blog.html"> 博 客 </a></li> 

06 <li><a href="about.html"> 关 于 我 们 </a></li> 

07 </ul> 

08 <p> 游戏 公园 | 设计 by <a href="http://www.mingrisoft.com/" target="_blank"> 
09 吉林 省 明日 科技 有 限 公 司 </a></p> 

10 </div> 

11 </div> 


注意 
人 项 目的 文件 夹 结构 ， 因 人 而 异 。 一 般 创建 css、images、js 和 font 这 4 个 文件 夹 ， 分 别 存放 CSS 
文件 、 图 片 文件 、JavaScript 文件 和 字体 资源 文件 。 


17.3.3 ”推荐 游戏 功能 的 实现 


推荐 游戏 功能 是 一 个 轮 播 图 的 效果 ， 完 全 使 用 CSS 技术 实现 。3 张 图 片 按照 指定 时 间 间 隔 ， 不 断 
交替 显示 或 隐藏 。 实 现 后 的 界面 效果 如 图 17.8 所 示 。 


图 17.8 推荐 游戏 的 界面 效果 


有 具体 实现 的 步骤 如 下 。 
(1) 编写 HTML 的 布局 代码 。 通 过 <ul> 标 签 、<li> 标 签 和 <img> 标 签 ， 引 入 3 张 轮 播 图 片 。 使 用 
<label> 标 签 ， 显 示 轮 播 图 片 的 顺序 数字 ， 关 键 代 码 如 下 。 
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01 ”<!- 引 入 3 张 轮 播 图 片 -> 


02 <divid="wrap"> 


03 <ul id="slider"> 

04 <li><img src="images/slider.png" /></li> 
05 <li><img src="images/slider.png" /></li> 
06 <li><img src="images/slider.png" /></li> 
07 </ul> 

08 </div> 


09 ”<!- 轮 播 图 片 的 轮 播 顺 序 --> 

10 <inputtype="radio" checked name="slider id="101"> 
11 <input type="radio" name="slider id="I02"> 

12 <input type="radio" name="slider id="I03"> 

13 <divid="opts"> 


14 <label for="|01">1</label> 
15 <label for="|02">2</label> 
16 <label for="|03">3</label> 
17 </div> 


(2) 编写 CSS 的 样式 动画 代码 。 通 过 CSS3 的 @keyframes 动画 属性 ， 为 页 面 标签 提供 动画 关键 
帧 功能 。 全 部 动画 时 间 为 100%, 不 同 的 百分比 进度 , 表示 持续 到 不 同 的 时 间 段 , 可 以 设置 不 同 的 CSS3 
动画 效果 ， 关 键 代 码 如 下 。 
01 /创建 动画 策略 */ 
02 @keyframes slide1{ 


03 0% { margin-left:0;} 

04 23% { margin-left:0;} 

05 33% { margin-left:-1000px;} 
06 56% { margin-left:-1000px;} 
07 66% { margin-left:-2000px;} 
08 90% { margin-left:-2000px;} 
09 100% {margin-left:0;} 

10 


} 
11 /关联 动画 名 称 */ 
12 #W01:checked ~ #wrap #slider { 
13 -webkit-animation-name:slide1; 


} 
15 “…. 省 略 其 他 代码 


17.3.4 ”最 新 游戏 功能 的 实现 


最 新 游戏 功能 ， 通 过 展示 游戏 的 缩 略图 ， 介 绍 最 新 游戏 资讯 。 界 面 设计 采用 九宫 格 的 方式 ， 添 加 
了 鼠标 滑动 动画 效果 ， 界 面 整 齐 大 气 ， 不 失灵 活 ， 界 面 效 果 如 图 17.9 所 示 。 
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最 新 游戏 


GHEE 
ITATS STON 
CTIONS -MOR NR 


CMR 
LIA1GSTOW 
PTIONS ML NR 


图 17.9 最 新 游戏 的 界面 效果 


具体 实现 步骤 如 下 。 
(1) 编写 HTML 的 布局 代码 。 使 用 <li> 标 签 引 入 最 新 游戏 的 缩 略 图 ， 通 过 <a> 标 签 ， 添 加 了 缩 略 
图 的 链接 地 址 页 面 single.html。 最 后 添加 onmouseover 属性 和 onmouseout 属性 ， 设 置 了 鼠标 滑动 事件 ， 


关键 代码 如 下 。 
01 <ulid="da-thumbs" class="da-thumbs"> 
02 <!- 引 入 最 新 游戏 的 缩 略 图 一 > 
03 <li> 
04 <a href="single.html" rel="title" class="b-link-stripe b-animate-go thickbox" 
05 onmouseover="mouseOver(this)" onmouseout="mouseOut(this)"> 
06 <img src="images/a1.jpg" /> 
07 <div style="left: -100%; display: block; top: 0px; transition: all 300ms ease;"> 
08 <h5>Games</h5> 
09 <span> 领 先 的 在 线 休闲 游戏 平台 </span> 
10 </div> 
| </a> 
12 </li> 
13 </ul> 
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(2) 编写 控制 鼠标 滑动 特效 的 JavaScript 代码 。 分 别 创建 鼠标 滑 入 的 mouseOver() 方 法 与 鼠标 滑 出 
的 mouseOut0 方 法 ， 这 两 个 方法 实现 的 逻辑 相同 。 以 mouseOver0 方 法 为 例 ， 首 先 获取 当前 滑动 事件 的 
obj 对 象 ， 通 过 obj 对 象 的 children 属性 ， 继 续 获 取 子 节点 ， 最 后 设置 子 节点 的 动画 效果 ， 代 码 如 下 。 
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01 <script> 

02 /鼠标 滑 入 

03 function mouseOver(obj){f 

04 var menu=obj.children'; /获取 对 象 子 节点 

05 menu[1].style.left='0px'; // 节 点 的 样式 属性 left 值 设置 为 0px 
06 } 

07 /鼠标 滑 出 

08 function mouseOut(objX{ 

09 var menu=obj.children'; /获取 对 象 子 节点 

10 menu[1].style.left='-100%'; // 节 点 的 样式 属性 left 值 设置 为 -100% 
11 } 

12 </script> 


17.4 博客 列表 的 设计 与 实现 


A 
17.4.1 博客 列表 的 设计 
博客 列表 功能 是 游戏 公园 资讯 平台 的 核心 功能 。 用 户 进入 博客 列表 页 面 ， 可 以 快速 浏览 游戏 的 名 


称 、 缩 略图 和 简介 ， 如 感 兴 趣 则 继续 单 击 内 容 ， 便 进入 博客 详情 页 面 。 最 新 游戏 资讯 在 博客 列表 页 面 
中 ， 以 九宫 格 的 方式 展示 ， 更 清晰 大 方 。 博 客 列表 的 界面 效果 如 图 17.10 所 示 。 


17.10 ”博客 列表 的 页 面 效 果 
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和 特 6 注 意 
图 17.10 仅 是 博客 列表 页 面 的 局 部 效果 图 。 读 者 可 继续 添加 游戏 资讯 、 分 页 组 件 等 内 容 。 


17.4.2 ”博客 列表 的 实现 


博客 列表 的 实现 方法 与 主页 相似 。 首 先 引 入 CSS 样式 ， 搭 建 页 面 框架 ， 然 后 实现 顶部 和 底部 的 布 
局 ， 显 示 网 站 的 LOGO 和 菜单 导航 ; 最 后 实现 博客 列表 的 内 容 区 域 ， 展 现 最 新 游戏 资讯 内 容 ， 有 具体 实 
现 步骤 如 下 。 

(1) 创建 一 个 HTML 页 面 ， 引 入 bootstrap.css 文件 和 style.css 文件 ， 搭 建 页 面 的 布局 和 框架 ， 代 
码 如 下 。 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<title> 博 客 列表 -游戏 公 园 </title> 

05 <meta name="viewport" content="width=device-width, initial-scale=1"> 

06 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

07 <linkhref="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> 
08 <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 


09 </head> 
10 <body> 
11 </body> 
12 </html> 
(2) 实现 顶部 和 底部 的 布局 ， 显 示 网 站 的 LOGO、 菜 单 导 航 和 制作 团队 等 内 容 ， 关 键 代码 如 下 。 
01 ”<!-- 顶 部 布局 --> 
02 <divclass="top-nav"> 
03 <span class="menu"><img src="images/menu.png" alt="> </span> 
04 <ul> 
05 <li><a href="index.html” > 主页 </a></li> 
06 <liclass="active"><a href="blog.html” > 博客 </a></li> 
07 <li><a href="about.html" > 关于 我 们 </a></li> 
08 <div class="clearfix"> </div> 
09 </ul> 
10 </div> 
11 ”<!-- 底 部 布局 -> 
12 <div class="footer"> 
13 <div class="container"> 
14 <ul class="footer-grid"> 
15 <liclass="active"><a href="index.htmI"> 主 页 </a></li> 
16 <li><a href="blog.htmI"> 博 客 </a></li> 
17 <li><a href="about.html"> 关 于 我 们 </a></li> 
18 </ul> 
19 <p> 游戏 公园 | 设计 by <a href="http://www.mingrisoft.com/" target="_blank"> 
20 吉林 省 明日 科技 有 限 公 司 </a></p> 
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21 </div> 
22 </div> 


稳 s 注 意 
第 (2) 步骤 实现 的 方法 与 主页 相同 。 请 参考 17.3.2 节 内 容 。 
(3) 实现 博客 列表 区 域 的 布局 ， 展 现 最 新 游戏 资讯 内 容 。 首 先 使 用 <img> 标 签 ， 引 入 游戏 资讯 的 
缩 略 图 ， 然 后 通过 <h4> 标 签 ， 显 示 游 戏 资讯 的 标题 ， 最 后 利用 <p> 标 签 ， 展 现 资讯 简介 内 容 ， 关 键 代码 
如 下 。 
01 <divclass="col-md-4 blog-top"> 


02 <div class="blog-in"> 

03 <a href="single.html" target="_blank"><img class="img-responsive" src="images/b3.jpg" 
alt=" "></a> 

04 <div class="blog-grid"> 

05 <h4><a href="single.htmI"> 地 铁 跑 酷 ( 周 年 庆 ) </a></h4> 

06 <p> 全 球 超人 气 跑 酷 手 游 《地 铁 跑 酷 》 给 你 精彩 、 好 玩 的 游戏 体验 。 画 面 精 致 、 操 作 流畅 、 

玩法 刺激 、 滑 板 炫 酷 、 角 色 丰 富 、 特 效 绚丽 …… 全 民 皆 玩 ， 全 球 3 亿 用 户 的 共同 选择 ， 
一 路 狂奔 ， 环 游 世界 ， 你 会 爱 上 它 ! 

07 </p> 

08 <div class="date"> 

09 <span class="date-in"> 

10 <i class="glyphicon glyphicon-calendar"></i> 

| 22.01.2015 

12 </span> 

43 <a href="single.html" class="comments"> 

14 <i class="glyphicon glyphicon-comment"></i> 

15 24 

16 </a> 

梳 <div class="clearfix"> </div> 

18 </div> 

19 <div class="more-top"> 

20 <a class=" hvr-wobble-top" href="single.html"> 更 多 信息 </a> 

21 </div> 

22 </div> 

23 </div> 

24 </div> 


17.5 ”博客 详情 的 设计 与 实现 


17.5.1 博客 详情 的 设计 


博客 详情 是 博客 列表 的 子 页 面 。 用 户 单 击 博客 列表 的 资讯 内 容 后 ， 则 进入 博客 详情 的 页 面 。 博 客 
详情 页 面 除了 详细 介绍 资讯 内 容 外 ,还 可 以 对 内 容留 言 评论 。 评论 内 容 利 用 表单 <form> 标 签 提交 回复 。 
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博客 详情 的 界面 效果 如 图 17.11 所 示 。 


17.11 博客 详情 页 面 的 效果 


17.5.2 ”博客 详情 的 实现 


根据 博客 详情 页 面 的 设计 布局 ， 按 照 搭 建 页 面 框架 、 实 现 内 容 区 布局 和 完成 留言 评论 3 个 步骤 的 
顺序 编码 ， 有 具体 实现 步骤 如 下 。 
(1) 创建 一 个 HTML 文件 ， 引 入 bootstrap.css 文件 和 style.css 文件 ， 搭 建 页 面 框架 ， 代 码 如 下 。 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
wh] 


<IDOCTYPE html> 

<html> 

<head> 

<title> 博 客 内 容 -游戏 公园 </title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> 
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 
</head> 

<body> 

</body> 


(2) 实现 顶部 和 底部 的 布局 ， 显 示 网 站 的 LOGO、 菜 单 导航 和 制作 团队 等 内 容 。 具 体 方法 请 参考 
17.4.2 节 的 内 容 。 

(3) 实现 资讯 内 容 区 的 布局 。 首 先 使 用 <img> 标 签 引入 游戏 资讯 的 大 缩 略 图 ， 然 后 通过 <h4> 标 签 
显示 资讯 的 标题 ， 最 后 利用 <p> 标 签 ， 展 现 详细 的 游戏 资讯 内 容 ， 关 键 代 码 如 下 。 
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01 <ahref="#"'><img class="img-responsive" src="images/si.jpg" alt=" "></a> 
02 <div class=" single-grid" style="font-size: 16px"> 
03 <h4> 地 铁 跑 酷 (周年 庆 )</h4> 


04 <div class="cal"> 

05 <ul> 

06 <li><span> 

07 <i class="glyphicon glyphicon-calendar"> </i>2016/12-08</span></li> 

08 <li><a href="#"><i class="glyphicon glyphicon-comment"></i>24</a></li> 

09 </ul> 

10 </div> 

11 <p> 全 球 超 人 气 跑 酷 手 游 《地 铁 跑 酷 》 给 你 精彩 、 好 玩 的 游戏 体验 。 画 面 精致 、 操 作 流畅 、 玩 法 刺激 、 
滑板 炫 酷 、 角 色 丰 富 、 特 效 绚丽 …… 全 民 皆 玩 ， 全 球 3 亿 用 户 的 共同 选择 ， 一 路 狂奔 ， 环 游 世界 ， 
你 会 爱 上 它 ! 

12 </p> 

13 <p> 更 新 提示 <br/> 

14 1. 圣 诞 节 快乐 ! 尽情 享受 圣诞 节 在 雪 中 参 加 地 铁 跑 酷 的 乐趣 ; <br/> 

15 2. 欢 迎 极地 探索 者 一 一 马 利 克 和 他 的 长 牙 装扮 ;<br/> 

16 3. 沿 着 奇妙 的 玩具 工厂 滑板 冲浪 ， 探 索 美 丽 的 冰雪 洞窟 ;<br/> 

17 4. 来 和 拥有 着 冰雪 装扮 的 精灵 琪 琪 一 起 玩 要 吧 ; <br/> 

18 5. 在 新 的 冰川 滑板 上 滑雪 冲浪 ! <br/> 

19 </p> 

20 </div> 


(4) 实现 留言 评论 的 表单 布局 。 首 先 使 用 <form> 标 签 ， 构 建 留言 评论 的 布局 内 容 ， 然 后 通过 <input> 
标签 ，type 属性 的 值 为 text 文本 域 ， 显 示 姓名 、 邮 件 、 主 题 和 内 容 等 回复 信息 ， 最 后 利用 submit 的 提 
交 按 钮 留言 回复 ， 关 键 代码 如 下 。 


01 <divclass="comment-bottom"> 


02 <h3> 回 复 </h3> 

03 <form> 

04 <input type="text" placeholder=" 姓 名 "> 

05 <input type="text" placeholder=" 邮 件 "> 

06 <input type="text" placeholder=" 主 题 "> 

07 <textarea type="text" placeholder=" 内 容 " required></textarea> 
08 < 上 -提交 按钮 -> 

09 <input type="submit" value=" 提 交 "> 

10 </form> 

11 -</div> 


17.6 关于 我 们 的 设计 与 实现 


17.6.1 关于 我 们 的 设计 


关于 我 们 功能 ， 介 绍 网 站 的 特色 版 块 、 特 色 功 能 和 团队 人 员 。 一 般 网 站 都 会 设立 关于 我 们 的 功能 ， 
是 网 站 设计 必 备 的 模块 。 内 容 和 形式 因 网 站 主题 而 异 ， 不 外 乎 网 站 的 发 展 历史 和 网 站 特色 等 。 关 于 我 
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们 的 界面 效果 如 图 17.12 所 示 。 


明日 学 院 ， 4 技 有 限 公司 顶 力 打 造 的 在 各 
量 、 优 质 的 课 帮 严 谋 ， 用 户 可 以 根据 自身 | 
式 服 务 , 培养 用 户 的 编程 思维 。 


GNCINES 
SATF SON 
CPTIONSF- NON NR 


特色 版 块 


17.6.2 ”关于 我 们 的 实现 


关于 我 们 的 实现 ， 由 搭建 页 面 框架 、 实 现 顶 部 和 底部 布局 、 展 现 内 容 区 域 和 介绍 团队 成 员 这 4 个 
步骤 构成 ， 实 现 的 流程 与 前 面 的 章节 相似 ， 有 具体 实现 步骤 如 下 。 
(1) 新 建 一 个 HTML 文件 ， 引 入 bootstrap.css 文件 和 style.css 文件 ， 搭 建 页 面 框架 ， 代 码 如 下 。 


01 <!IDOCTYPE html> 

02 <html> 

03 <head> 

04 ”<title> 关 于 我 们 -- 游 戏 公 园 </title> 

05 <meta name="viewport" content="width=device-width, initial-scale=1"> 
06 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
07 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> 
08 <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 
09 </head> 

10 <body> 

11 </body> 
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(2) 实现 顶部 和 底部 的 布局 ， 显 示 网 站 的 LOGO、 菜 单 导航 和 制作 团队 等 内 容 。 具 体 方法 请 参考 
17.4.2 节 的 内 容 。 
(3) 实现 内 容 区 的 布局 ， 关 键 代码 如 下 。 


01 
02 
03 
04 
05 


<!-- 关 于 我 们 介绍 文字 --> 

<div class="about-top"> 
<h3> 关 于 我 们 </h3> 

</div> 

<div class="about-bottom"> 
<p style="text-align: leftfont-size: 20px"><strong> 明 日 学 院 ， 是 吉林 省 明日 科技 有 限 公司 倾 力 打造 的 
在 线 实用 技能 学 习 平 台 ， 该 平台 于 2016 年 正式 上 线 ， 主 要 为 学 习 者 提供 海量 、 优 质 的 课程 ， 课 程 结构 
严谨 ， 用 户 可 以 根据 自身 的 学 习 程度 ， 自 主 安排 学 习 进度 。 我 们 的 宗旨 是 ， 为 编程 学 习 者 提供 一 站 式 
服务 ， 培 养 用 户 的 编程 思维 。</strong> 


</p> 
<!- 引 入 两 张 介绍 图 片 -> 
<div class="about-btm"> 
<div class="col-md-6 about-left > 
<a href="single.html"> 
<img class="img-responsive" src="images/bt.jpg" alt="/></a> 
</div> 
<div class="col-md-6 about-right"> 
<a href="single.html"> 
<img class="img-responsive" src="images/bt1.jpg" alt=""/></a> 
</div> 
<div class="clearfix"></div> 
</div> 
</div> 


注意 
关于 我 们 的 介绍 文字 和 介绍 图 片 仅 做 案例 说 明 使 用 ,可 根据 实际 的 开发 情况 ,修改 或 替换 对 应 
的 文字 和 图 片 。 


(4) 实现 团队 介绍 的 布局 。 首 先 添加 ch-item 样式 类 ， 横 排 布局 团队 的 成 员 ， 然 后 增补 ch-img-1 


样式 类 、ch-img-2 样式 类 和 ch-img-3 样式 类 ， 引 入 团队 成 员 漫画 照 。 实 现 后 的 界面 如 图 17.13 所 示 。 


我 们 的 团队 


图 17.13 ”团队 介绍 的 界面 效果 
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关键 代码 如 下 。 

01 <li> 

02 <div class="ch-item"> 

03 <div class="ch-info-wrap"> 

04 <div class="ch-info"> 

05 <div class="ch-info-front ch-img-1"></div> 
06 <div class="ch-info-back"> 
07 <h3>Jonsen</h3> 

08 <p> 前 端 工程 师 </p> 
09 </div> 

10 </div> 

3 </div> 

届 </div> 

13 </i> 


17:7 -小 结 


本 课程 使 用 HTML、CSS3 和 JavaScript 技术 ， 制 作 完成 了 一 个 相对 简单 的 游戏 资讯 网 站 一 一 游戏 
公园 。 从 功能 划分 ， 网 站 由 主页 、 博 客 和 关于 我 们 这 3 个 功能 构成 。 从 知识 点 分 析 ， 涉 及 HTML 常用 
标签 的 使 用 、CSS3 动画 属性 的 展示 和 JavaScript 控制 页 面 样式 的 能 力 等 内 容 。 

相信 通过 对 网 站 的 设计 和 代码 的 实现 ， 学 习 人 员 能 更 容易 理解 网 站 制作 的 流程 ， 对 今后 的 工作 实 
践 大 有 益处 。 
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